1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > CSS3学习笔记--line-height:150%与line-height:1.5的真正区别

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

时间:2019-01-06 14:18:48

相关推荐

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。