CSS3学习笔记--line-height:150%与line-height:1.5的真正区别

代码：
<div style="line-height:150%;font-size:16px;">
父元素内容
<div style="font-size:30px;">
Web前端开发<br />
line-height行高问题
</div>
</div>

其实区别就在于继承的问题上。

150%是先计算后继承，根据父元素的字体大小计算出行高，并且子元素依然沿用这个计算后的行高：子元素的行高 = 16*150% = 24px; 因此字体显示不全。


1.5则是先继承后计算（无单位参数），根据子元素自己字体的大小去乘以1.5来计算行高 ： 子元素的行高 = 30*1.5 = 45px；因此字体显示完全。



另，1.5em等也是按照150%的情况来算的。