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; 因此字体显示不全。aaarticlea/png;base64,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" alt="" />


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

aaarticlea/png;base64,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" alt="" />


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

上一篇:同步队列-Queue模块解析


下一篇:.net 直接输出远程文件到浏览器和下载文件保存到本机