本地广东中山网站建设,seo优化费用,网站建站公司多少钱,网站建设方案哪家好 推荐一、行高的定义line-height(行高)#xff1a;两行文字基线之间的距离1、什么是基线#xff1f;2、为何是基线#xff1f;3、需要两行吗#xff1f;1、什么是基线#xff1f;我们上学的时候都用过#xff0c;抄写英文字母的时候。其中有一条红线#xff0c;这个红线就是基… 一、行高的定义 line-height(行高)两行文字基线之间的距离 1、什么是基线 2、为何是基线 3、需要两行吗 1、什么是基线 我们上学的时候都用过抄写英文字母的时候。其中有一条红线这个红线就是基线是为了写英文的时候对齐用的。 2、为何是基线 为什么不是底线不是中线呢因为基线乃线定义之根本 3、需要两行吗 两行的定义已经决定了一行的表现 如图首先基线与基线之间的距离就是行高 接下来我们看看line-height:200px跟这个基线到底怎么纠葛起作用的呢 然后我们脑补一下如果行高为0会怎么样子呢他会重合。 4、为何line-height可以让单行文本垂直居中 首先真的垂直举重了吗 如图会发现这个x跟这个破折号的中心并没有跟中线重合在一起。也就是实际上并没有完全居中的只是看上去垂直居中了。 二、line-height与行内框盒子模型 1、什么是行内框盒子模型 所有内联元素的样式表现都与行内框盒子模型有关例如浮动的图文环绕效果... p这是一行普通的文字这里有个emem/em标签/p 上面是一行普通的文字有个em标签。但是却包含了4种盒子。 1、“内容区域”(content area)是一种围绕文字看不见的盒子。内容区域(content area)的大小与font-size大小相关。个人理解可以是选中文字的时候那一块区域 2、“内联盒子”(inline boxes), “内联盒子”不会让内容成块显示而是排成一行。如果外部含inline水平的标签(span,a,em等),则属于“内联盒子”。如果是光秃秃的文字则属于“匿名内联盒子” 3、“行框盒子”line boxes每一行就是一个“行框盒子”每个“行框盒子”又是由一个一个“内联盒子”inline-boxes组成 4、p标签所在的“包含盒子”containing box,此盒子由一行一行的“行框盒子”line boxes组成。 了解行内框盒子模型对理解line-height有什么现实意义 三、line-height对高度机理机理是机制原理对简称 先看一个小小的例子 bodyp这是一行普通的文字这里有个emem/em标签。/pscriptconsole.log(document.querySelector(p).clientHeight);// mac chrome:22 firefox:23// windows chrome:21 ie:19 firefox:22/script
/body 那么这个元素高度是从何而来的呢是不是由里面的文字撑开的非也是由line-height决定的 style.test1{font-size: 36px;line-height: 0;border: 1px solid #ccc;background: #eee;margin-top:50px;}.test2{font-size: 0;line-height: 36px;border: 1px solid #ccc;background: #eee;margin-top:50px;}
/style
bodydiv classtest1测试1/divdiv classtest2测试2/div
/body 看这个demo能看到test1文字长的很大高度就是边框的高度,2pxtest2有高度文字没有36px。所以内联元素的高度是由行高决定的 那么问题来了line-height命名是两基线距离单行文字哪来行高还控制了高度这就有点尴尬了。 1、行高由于其继承性影响无处不在即使单行文本也不例外也就是说页面上所有元素每个角落都有行高的。 2、行高只是幕后黑手高度的表现不是行高而是内容区域和行间距。 只不过正好... 内容区域高度行间距 行高 1)、内容区域高度只与字号以及字体有关与line-height没有任何关系 2在simsun宋体字体下内容区域高度等于文字大小值。 simsun字体下 font-size 行间距 line-height 那么什么是行间距呢行间距 行高 font-size 把行间距上下拆分就有了“半行间距”。 总结行高决定内联盒子高度行间距墙头草可大可小甚至负值保证高度正好等同于行高 那么问题来了如果行框盒子里面有多个不同行高的内联盒子由行高最高的那个盒子决定似是而非看上去好像是对的其实是不正确的。 bodyp这是一行普通的文字这里有个em styleline-height: 80px;em/em标签/pscriptconsole.log(document.querySelector(p).clientHeight);/script
/body 发现clientHeight正好是80px。如果是这个例子看那句话是正确的。 bodyp这是一行普通的文字这里有个em styleline-height: 80px; vertical-align:40px;em/em标签/pscriptconsole.log(document.querySelector(p).clientHeight);/script
/body 这个时候再来看一下这个行高的高度91不是80了。发生了一些变化比预计的要高了。所以那句话是不准确的。那么vertial-align是个非常重要也非常深的一个东西。等会讲这个东西。结论是91px不等于高度最高的内联元素。 前面讲的是单行文本的高度如果是多行文本高度呢多行文本的高度就是单行文本高度累加。 若行框盒子里面混入inline-block水平元素如图片高度如何表现呢 四、line-height各类属性值 line-height支持的属性值大概这些 normal number length percent inherit 我们一个个来看一下 1)line-height:normal 默认属性值跟着用户的浏览器走且与元素字体关联。 比如我用的火狐你用的chrome这个normal的值可能就不一样 bodyp这是一行普通的文字这里有个emem/em标签。/pscriptconsole.log(document.querySelector(p).clientHeight);// mac chrome:22 firefox:23// windows chrome:21 ie:19 firefox:22/script
/body 还有另外一种字体不一样normal的值也不一样 bodydiv stylefont-family:雅黑字体/div
/body family不一样normal的值也会不一样。 2line-height:number 使用数值作为行高值。例如 line-height:1.5; 根据当前元素的font-size大小计算。 假设文字大小(font-size)20px.则实际的行高像素值是 line-height 1.5 * 20px 30px 3) line-height:length 使用具体长度值作为行高值例如 line-height: 30px; 4) line-height:percent 使用百分比作为行高值。例如 line-height:150%; 相对于设置了该line-height属性的元素的font-size大小计算。 假如文字大小(font-size)20像素则实际的行高像素值是 line-height 150% * 20px 30px; 5) line-height:inherit 行高继承 ie8行高天生好像就会继承那么为什么还要这个继承呢 input{ line-height: inherit; } input框等元素默认行高是normal,使用inherit可以让文本框样式可控性更强。 此继承非彼继承。input的行高默认是normal,不是继承外面的默认不受外面影响。这个时候可能需要继承一下 这里有一个有意思的问题 line-height:1.5, line-height:150%, line-height:1.5em 有什么区别 我是这么认为的从计算上来讲是没有任何差别的。比如20px计算出来,高度全是30px。差别在什么地方呢 应用元素有差别 1line-height:1.5所有可继承元素根据font-size重计算行高 2line-height:150%/1.5em 当前元素根据font-size计算行高继承给下面的元素 这语言很苍白不懂看例子 bodydiv styleline-height:1.5; width:500px;span stylefont-size:60px;我的font-size为60px/span/divdiv styleline-height:150%; width:500px;span stylefont-size:60px;我的font-size为60px/span/div
/body 浏览器看会有什么不一样上面的是90px下面的是40px。上面的行高会重新计算扩大下面的不会 body全局数值行高使用经验 body{ font-size:14px; line-height:?} 假如是博客这种阅读为主的行高至少1.5到1.6。如果主要是网页开发面向用户的。一半匹配20px的使用经验方便心算。 line-height 20px / 14px 1.42857 body{ font-size:14px; line-height:1.42857?} 这个很怪火狐里面是19px;所以要向上取值 body{ font-size:14px; line-height:1.4286} 五、line-height与图片的表现 首先思考一个问题行高会不会影响图片实际占据的高度也就是行高从一百改成两百这个图片占据的高度会不会变。不会变。 p stylebackground:#eeeimg srcimgs/text.png alt stylewidth:200px;/p 首先这么一张图片会看到图片下面会有一段间隙为什么会有间隙呢这个时候在图片后面加一段文字纹丝不动。没有任何变化。会发现图片的下边缘和文字的边缘是对齐的。这是为什么呢因为默认是根据基线对齐的。这个时候改变行高发现下边缘也变高了。 bodyp stylebackground:#eee; line-height: 60pximg srcimgs/text.png alt stylewidth:200px;span styledisplay:inline-block; background:#fff;图片高度177px字体14px/span/p
/body 会发现行高的高度就是文字的高度。因为要让文字根据基线对齐所以下面的高度变高了。所以现在解释刚开始的下面的空隙。因为要把文字进行基线对齐所以不得已图片下面有空隙。那么为什么刚开始没有文字的时候表现跟有文字一样呢。这里有个概念叫做隐匿文本节点这是自己的理解就是里面好像有个文本但是看不到摸不到js获取不到。 那么如何消除图片底部间隙我们实际开发中是不需要的。 1、图片块状话无基线对齐
img{ display: block; }
2、图片底线对齐
img{ vertical-align: bottom; }
3、行高足够小基线位置上移
.box{ line-height:0; } 六、line-height的实际应用 像居中啊边距什么的上面都说过就不探讨了。 1、大小不固定的图片多行文字的垂直居中 style.box{line-height: 300px;text-align: center;background: #eee;}.box img {vertical-align: middle;}
/style
bodydiv classboximg srcimgs/text.png stylewidth:200px alt/div
/body 这个时候图片会近似的垂直居中这里又用到了vertical-align;这个middle是基线1/2x的距离下一章再具体研究下 2、多行文本水平垂直居中 style.box{line-height: 250px; text-align: center; background: #eee;}.box .text{display: inline-block; line-height: normal; text-align: left; vertical-align: middle;}
/style
bodydiv classboxdiv classtext多行文字水平垂直居中实现的原理跟上一页图片的实现是一样的区别在于要把多行文本所在的容器的display水平转换成和图片一样的也就是inline-block以及重置外部继承的 text-align 和 line-height属性值。/div/div
/body 这里父元素text-align:center和子元素vertical-align:middle跟图片居中是一样的。唯一不一样的就是要把text设置成inline-block;同时干掉父元素的line-height这些继承下来的东西。如果不干掉三行文字都是250px。 接下来看几个行高的事例产生的现象 stylespan {background: red;}.c1 {line-height: 20px;}.c2 {line-height: 8px;}.c3 {line-height: 30px;}.c5 {line-height: 28px}
/style
bodydivspan classc1inline box xfg中文/spanspan classc2inline box/spanspan classc3inline box/spaninline boxspan classc5inline box/span/div
/body 它们的行高不一样但是为什么渲染的高度是一样的 这个呢其实比较复杂这个涉及到文字到排版文字到排版中有几条线上面叫做顶线下面叫做底线顶线和底线之间的区域叫做文本占据到区域。字母都会有一个基线都是对齐的。这就是为什么行高不一样但是却一样。第三个元素到行高是30。但是选中看高度还是22。那行高会决定什么呢会决定它上下到多余的高度。我们选中div发现刚好是30px。它会把外面的盒子撑起来。那么行高是由什么构成的。行高是由line-box(一行的高度)组成的。line-box是由inline-box组成的。inline-box的高度会决定line-box的高度 style.cc1 {font-size: 12px;}.cc2 {font-size: 18px;}.cc3 {font-size: 24px;}
/style
bodydiv styleborder:1px solid redspan stylebackground:blue; color:#fff; font-size:20px; line-height:60px居中xfgemsp;emsp;emsp;emsp;emsp;emsp;emsp;emsp;emsp;emsp;emsp;emsp;emsp;/span/divdivspan classcc1第一段/spanspan classcc2第二段/spanspan classcc3第三段/span/divdiv stylebackground:redspan文字/spanimg srctext.png alt/divdivdiv stylefloat:leftspan第一段/span/divdiv stylefloat:leftspan第二段/span/div/div
/body 第一部分是为了大家看到的样子div是没有定高的里面有一个span。span是inline的元素。它也是没有定高的。因为span是inline元素定高其实没用。它有一个背景blue。背景blue是根据字体大小来渲染的。底线和顶线之间。我们字体调大背景也会变大。那我们的line-height是60px。60px实际上就是把整个div撑起来了。这个div是62因为他有边框。这里有一个特性就是行高比字体要大要大的话多余的高度会上下分布让里面的inline元素垂直居中。这是一个非常重要的特性如果要做垂直居中的话用line-height来做就好了而且在这种情况下都不用为div指定高度。 第二部分我们看到字体的大小是不一样的。字体大小不一样那么按照什么对齐呢。默认情况呢是按照base-line,基线对齐。对大部分中文来说底部基本上是基线对位置。如果要居中对齐怎么办。 那我们就设置vertical-align:middle居中对齐三个部分都设置居中对齐。设置top就是根据顶线对齐。设置bottom就是根据底线对齐。这里根据顶线和底线对齐并不是根据文字都顶部和底部对齐。 第三部分有一个文本有一个图片。然后会发现一个很奇怪的事情。这个图片下面有一段空白。有人说我是不想要这个空白的。那怎么办呢首先他的原因是什么原因是因为img这个也相当于是一个inline的这样一个元素。inline的元素就要遵守行高的构成。他会按照base-line对齐。就是基线对齐。基线对齐的话就意味着基线到底线之间还是有一段空隙的。这是这个空隙产生的原因。那我们要去掉这个空隙怎么办默认是按base-line对齐base-line跟底线是有偏差的。这个偏差的大小视字体大小而定。如果是12px的大小那么这个图片的空隙有可能就是3px左右。那么这就是经典的图片3px缝隙问题。这个问题怎么解决呢很简单默认是base-line。我们改成vertical-align:bottom,按底线对齐。这样缝隙就没有了 转载于:https://www.cnblogs.com/wzndkj/p/10296941.html
