码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-03-03 09:46:38      阅读:181      评论:0      收藏:0      [点我收藏+]

标签:

 

代码:
<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%的情况来算的。

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

标签:

原文地址:http://www.cnblogs.com/forlina/p/4310112.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!