css line-height

“行高”顾名思意指一行文字的高度。具体来说是指两行文字间基线之间的距离

1 实现单行文字垂直居中

设置box的inline-height值为box的height值，网上一直说设置inline-height值与height之相等，其实去掉height值也是可以的

2 实现div中行数不固定的文字的垂直居中

要实现高度不固定的文字垂直居中使用padding就好了。对于高度固定的div，里面文字单行或多行显示，字体大小有大有小的情况怎么办呢？方法之一就是借助于line-height。

正如上面所说，line boxes的高度取决于它的下属职员的最高高度。而这个高度由一个不占据任何空间的空格完成，方法即使设置font-size为0，line-height为所需要的高度。同时，我们为了分隔line boxes，同时要保持在一行上，需要设置display属性为inline-block。如下代码，有别于demo：

css代码：

.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;}

html代码：

<p class="mulit_line">
    <span style="font-size:12px;">这里是高度为150像素的标签内的多行文字，文字大小为12像素。<br />这里是第二行，用来测试多行的显示效果。</span><i>&nbsp;</i>
</p>

实现文字1.5倍行间距：

因为文字有可能有大有小，直接设置line-height:150%;百分值也有继承性，就会出现大字体重叠的现象；解决办法 父元素 *{ line-height：150%;}，使用“*”通配符大大增加了css的渲染，效率低，

同样的效果只需要.article_box{line-height:1.5;}就可以实现了。

因为：

150%虽然和1.5在值上是一样的，但是它们也是有差别的，差别在于继承性，使用百分比会计算line-height的值，然后以px像素为单位继承下去，而1.5则是先继承1.5这个值，遍历到了该标签再计算去line-height的像素值。

使用行高代替高度避免haslayout

在某些情形下，line-height可以和height互换，因为实现的效果一样。都能撑开一个高度，然而这两个css属性有一个较隐蔽的差异，就是使用height会使标签haslayout，而使用line-height则不会。以前只有IE6的时候曾流行使用height清除浮动，就是利用了IE下height使haslayout的属性。但有时候，haslayout并不需要，反而要避免。

IE6，IE7下，类似inline-block属性的元素里如果有block属性的元素，如果该block haslayout，则该标签会冲破外部inline-block的显示而宽度100%显示，从使按钮自适应文字大小的效果失效，解决方法就是使用line-height代替height。

上图中第一个标签使用height定高，结果宽度直接100%显示；第二个标签使用line-height定高，结果很规矩，自适应与内部文字大小。其代码如下：

css部分：

.out{display:inline-block; background:#a0b3d6; margin-top:20px;}
.in1{display:block; height:20px;}
.in2{display:block; line-height:20px;}

html部分：

<span class="out">
    <span class="in1">height:20px;</span>
</span>
<span class="out">
    <span class="in2">line-height:20px;</span>
</span>

 

 

来自：http://www.zhangxinxu.com/wordpress/?p=384

转载于:https://www.cnblogs.com/xiaofenguo/p/6183251.html