css - lineHeight

line-height是个可继承css属性，如果你设置了这个值不是inherit或者"",那么它就和父元素没关系了,它会按照当前标签的字体大小计算，另外line-height的继承稍微有点复杂

 

line-height的几种定义方式：

 

1. p{ line-height:inherit; }

 

这种默认设置,就是你不定义line-height是的默认值

 

2. p{ line-height:normal; font-size:30px}  

 

这个normal值默认值, 在opera里面取的是当前标签的字体大小(30px),在webKit(chrome,safari),firefox,ie里面的取值是当前标签的字体大小的1.0~1.2之间(34px)，这样看来一般情况下这个值最好别用。

 

 

2. p { line-height:150%; font-size:30px}

这个值就是取当前标签字体大小的百分比(45px)，值的注意的是如果这个p标签下有行内标签，如果这个行内标签没有设置line-height或者

设置值是inherit或者""的话，它的line-height属性将继承p标签计算过的“绝对值”(45px而不是150%)

3. p { line-height:20px; }

这个就没的说了，实际值和被继承的值都是这个值(20px)

 

4. p { line-height:1.5em; }

这个和百分比的情况一样

5. p { line-height:1.2; font-size:30px }

这个是最值得注意的，它的取值很正常，就是当前标签字体大小的倍数，但是它如果被继承了，那么被继承的值还是这个倍数(1.2)，

而不是计算后的值

 

总结：

除了倍数值,其他百分比(%)，相对值(em), “比较绝对点的值”(px,pt...)都是被继承计算后的值

 

拓展：

其实，倍数的应用在css里面可以看做一个特殊情况，可以理解为它是在运行时执行的，而其他几种值是在定义时执行的，

例如下面的情况：

 

 

<div id="div1" style="font-size:150%;"> 倍数值

  <div id="div2" style=" font-size:150%">倍数值</div>

</div>

 

 

最终的结果是：

div1的字体大小值：16*150%

div2的字体大小值：16*150%*150%

 

 

理解为：css在定义到div2的时候，div2里面已经继承到了div1的值16*150%=24，这时候在定义font-size:150%就是24*150%=36

 

 

 

而：

 

 

 

<div id="div1" style="font-size:1.5;"> 倍数值

  <div id="div2" style=" font-size:1.5">倍数值</div>

</div>

 

 

最终的结果是：

div1的字体大小值：16*1.5

div2的字体大小值：16*1.5

 

理解为：css在定义到div2的时候，div2里面并没有继承到了div1里fontSize的具体值，也就是现在div2的值仍然是16px，这时候在定义font-size:1.5就是16*1.5

 

 

(*以上纯非官方个人理解，如果您非常非常偶然看到了，不要扔砖哦)