码迷,mamicode.com
首页 > 其他好文 > 详细

line-height属性的深入了解

时间:2017-09-09 18:11:41      阅读:142      评论:0      收藏:0      [点我收藏+]

标签:字号   nta   支持   继承   指定   不同   percent   根据   strong   

line-height属性的细节
与大多数CSS属性不同,line-height支持属性值设置为无单位的数字。有无单位在子元素继承属性时有微妙的不同。

语法
line-height: normal | <number> | <length> | <percentage>
normal 根据浏览器决定,一般为1.2。
number 仅指定数字时(无单位),实际行距为字号乘以该数字得出的结果。可以理解为一个系数,子元素仅继承该系数,子元素的真正行距是分别与自身元素字号相乘的计算结果。大多数情况下推荐使用,可以避免一些意外的继承问题。
length 具体的长度,如px/em等。
percentage 百分比,100%与1em相同。

有单位(包括百分比)与无单位之间的区别
有单位时,子元素继承了父元素计算得出的行距;无单位时继承了系数,子元素会分别计算各自行距(推荐使用)。

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

150%是根据父元素的字体大小计算出行高,并且子元素依然沿用这个计算后的行高。而1.5则是根据子元素自己字体的大小去乘以1.5来计算行高。另,1.5em等也是按照150%的情况来算的。

line-height属性的深入了解

标签:字号   nta   支持   继承   指定   不同   percent   根据   strong   

原文地址:http://www.cnblogs.com/lxuan/p/7498775.html

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