css⾏⾼line-height的⼀些深⼊理解及应⽤
⼀、line-height与line boxes⾼度
line-height撑开了div的⾼度，⽽不是⽂字
在inline box模型中，有个line boxes，这玩意是看不见的，这个玩意的⼯作就是包裹每⾏⽂字。⼀⾏⽂字⼀个line boxes。line boxes什么特性也没有，就⾼度。
所以⼀个没有设置height属性的div的⾼度就是由⼀个⼀个line boxes的⾼度堆积⽽成的。
⽽line boxes是由它的⼿下– inline boxes⼲的，这些⼿下就是⽂字啦，图⽚啊，span之类的inline属性的标签啦。line boxes只是个考察汇报⼈员，考察它的⼿下
谁的实际line-height值最⾼，谁最⾼，它就要谁的值，然后向上汇报，形成⾼度。
例如，<span ></span><span ></span>，取⼿下line-height最⾼的值，则line boxes的⾼度就是40像素了。
⼆、在单⾏或多⾏或图⽚垂直居中实现上的应⽤
1、单⾏⽂字的垂直居中对齐
⽹上都是这么说的，把line-height值设置为height⼀样⼤⼩的值可以实现单⾏⽂字的垂直居中。这句话确实是正确的，但其实也是有问题的。问题在于height，
看我的表述：“把line-height设置为您需要的box的⼤⼩可以实现单⾏⽂字的垂直居中”，差别在于我把height去掉了，这个height是多余的，您不信您可以⾃⼰试
试。
2、多⾏⽂字的垂直居中
要实现⾼度不固定的⽂字垂直居中使⽤padding就好了。对于⾼度固定的div，⾥⾯⽂字单⾏或多⾏显⽰，字体⼤⼩有⼤有⼩的情况怎么办呢？⽅法之⼀就是借助
于line-height。
正如上⾯所说，line boxes的⾼度取决于它的下属职员的最⾼⾼度。⽽这个⾼度由⼀个不占据任何空间的空格完成，⽅法即使设置font-size为0，line-height为所
需要的⾼度。同时，我们为了分隔line boxes，同时要保持在⼀⾏上，需要设置display属性为inline-block。
css代码：
<span ><span >.mulit_line{line-height:150px;border:1px dashed #cccccc; padding-left:5px;}
.mulit_line span{display:-moz-inline-stack; display:inline-block; line-height:1.4em; vertical-align:middle;}
.mulit_line i{width:0; display:-moz-inline-stack; display:inline-block; vertical-align:middle; font-size:0;}</span></span>
html代码：
<span ><p class="mulit_line">
<span >这⾥是⾼度为150像素的标签内的多⾏⽂字，⽂字⼤⼩为12像素。<br />这⾥是第⼆⾏，⽤来测试多⾏的显⽰效果。</span><i> </i>
</p></span>
效果如上批注图。已通过IE8以外的主流浏览器的兼容性检测。
3、图⽚的垂直居中
此⽅法在“”⼀⽂中的最后补充内容⾥已经详细讲解了。这⾥不多说了。
css代码：
.zxx_ul_image{overflow:hidden; zoom:1;}
.zxx_ul_image li{float:left; width:150px; height:150px; text-align:center; line-height:150px; *font-size:125px;}
.zxx_ul_image li:after{content:' '; vertical-align:middle;}
.zxx_ul_image li img{vertical-align:middle;}
css设置文字垂直居中HTML代码：
<span ><span ><ul class="zxx_ul_image">
<li><img src="image.zhangxinxu/image/study/s/s128/mm1.jpg" /></li>
<li><img src="image.zhangxinxu/image/study/s/s128/mm2.jpg" /></li>
<li><img src="image.zhangxinxu/image/study/s/s128/mm3.jpg" /></li>
<li><img src="image.zhangxinxu/image/study/s/s128/mm4.jpg" /></li>
<li><img src="image.zhangxinxu/image/study/s/s128/mm5.jpg" /></li>
<li><img src="image.zhangxinxu/image/study/s/s128/mm6.jpg" /></li>
</ul></span></span>
三、⾏⾼在⽂章显⽰中的应⽤
⼀般社交型的⽹站都会有发博⽂或写⽇志的功能，其中发表后的⽂章显⽰也是有学问的，其中之⼀就是line-height⾏⾼。
⾸先要知道⾏⾼的⼏种表⽰⽅法：px/em，或normal，或百分值，或数值，或inherit继承。
在显⽰⽂章的box⾥，px的表⽰⽅法⾸先是要被淘汰的。因为⽂章⾥⾯的⽂字是有⼤有⼩的，使⽤px定值，由于继承性，⽆法实现。
根据⽂字⼤⼩⾃动调整间距，会出现⼤号⽂字重叠的现象。normal也是不⾏的，⼀般⽂章显⽰最好是650像素的宽度，1.5倍的⾏距较好。⼀般浏览器
的normal值在1~1.2之间，使⽤normal必然⽂字间距过⼩，阅读吃⼒。百分值也有继承性，但是有个很搓的办法可以实现⽂字间距⾃动适应于⽂字的⼤⼩，那就是使⽤“*”通配符，例如：.article_box *{line-height:150%;}就不会出现⽂字重叠的情况了。⽹易博客就是使⽤的这个⽅法，下图为证：
为什么说这个⽅法挫呢，使⽤“*”通配符⼤⼤增加了css的渲染，效率低，⽽且有更好的⽅法，就是使⽤数值。150%虽然和1.5在值上是⼀样的，但是它们也是有差别的，差别在于继承性，使⽤百分⽐会计算line-height的值，然后以px像素为单位继承下去，⽽1.5则是先继承1.5这个值，遍历到了该标签再计算去line-height的像素值。所以同样的效果只需要.article_box{line-height:1.5;}就可以实现了。
四、使⽤⾏⾼代替⾼度
避免haslayout
在某些情形下，line-height可以和height互换，因为实现的效果⼀样。都能撑开⼀个⾼度，然⽽这两个css属性有⼀个较隐蔽的差异，就是使⽤height会使标
签haslayout，⽽使⽤line-height则不会。以前只有IE6的时候曾流⾏使⽤height清除浮动，就是利⽤了IE下height使haslayout的属性。但有时候，haslayout并不需要，反⽽要避免。
读过我前⾯有关⾃适应按钮⽂章的⼈可能会发现我使⽤了line-height代替了height，其原因在于：IE6，IE7下，类似inline-block属性的元素⾥如果有block属性的元素，如果该block haslayout，则该标签会冲破外部inline-block的显⽰⽽宽度100%显⽰，从使按钮⾃适应⽂字⼤⼩的效果失效，解决⽅法就是使⽤line-height代替height。
上图中第⼀个标签使⽤height定⾼，结果宽度直接100%显⽰；第⼆个标签使⽤line-height定⾼，结果很规矩，⾃适应与内部⽂字⼤⼩。其代码如下：
css部分：
<span ><span >.out{display:inline-block; background:#a0b3d6; margin-top:20px;}
.in1{display:block; height:20px;}
.in2{display:block; line-height:20px;}</span></span>
html部分：
<span ><span ><span class="out">
<span class="in1">height:20px;</span>
</span>
<span class="out">
<span class="in2">line-height:20px;</span>
</span></span></span>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。