likes
comments
collection

line-height用了这么久,你真的了解他么

作者站长头像
站长
· 阅读数 9

介绍

众所周知,line-height 是作为设置多行元素的空间量(即行高)被引入的,通常被用来设置文字段落之间的间距,它也是CSS最早被定义的属性之一,时至今日,在日常排版布局中极为常用。可是,line-height 用了这么久,你真的了解他么,本期,将给大家带来的是 line-height 可以设置不同的数值形式后带来不同的影响。

演示

单位

对于块级元素,line-height指定元素行盒的最小高度。它除了可以传入长度单位 px 外,还可以传入很多数值形式,比如说关键字,百分比等等。接下来,我们就介绍另外的四种形式。

em

em作为css常用的长度单位,其可以理解为当前元素字体大小所占空间,即,1em 相当于当前元素设置的 font-size 的大小,而 1.5em 相当于当前元素的字体大小的1.5倍。

如下图演示,我们可以发现,当使用em作为单位时,每一行的间距都变成相同的了,因为如果设置成em作为单位,它会只找寻 父元素divfont-size ,也就是那个32px的值,而且下面的 p标签 则会继承父元素的 line-height ,所以每行的行高都变得相同了。

line-height用了这么久,你真的了解他么

百分比

百分比或许在我们在设置块元素的宽高时经常会用到,但是在设置 line-height 也可以使用,它会参考父元素的字体大小进行设置,即,100% 相当于当前元素设置的 font-size 的大小,而 150% 相当于当前元素的字体大小的1.5倍。所以,这里设置百分比和em单位相同,都会继承父元素的行高,无法自己适应当前元素。

line-height用了这么久,你真的了解他么

无单位数字

无单位数字顾名思义,可以不用设置单位,你可以理解为当前元素 font-size 的倍数,这种形式可以让元素适应自己的 font-size 大小来做行高。

如下图,我们就可以发现行高会不同元素的 font-size 变化而变化。

line-height用了这么久,你真的了解他么

normal

normal 作为 line-height 里面唯一特有的关键字,也是默认值。而它的大小取决于当前的浏览器内置的默认值的多少。而默认值绝大多数情况是一个无单位数字,所以并不会继承父元素的 line-height ,而是根据自己当前的 font-size 自动进行调整。

line-height用了这么久,你真的了解他么

简写

div{
    font: 32px/48px Georgia,serif;
    font: 32px/1.5em Georgia,serif;
    font: 32px/150% Georgia,serif;;
    font: 32px/1.5 Georgia,serif;
    font: 32px/normal Georgia,serif;
}

总结

可以看到使用长度单位和百分比都可以继承父元素的行高,而无法适应每个元素自己的行高除非单独设置。而且无单位数值就解决了这一点,会根据自身元素的 font-size 的大小变化而变化,而初始化会默认关键词normal,它可以理解为默认成一个依据浏览器而不同的无单位数字。所以,也是按官方推荐的善用无单位数字,让你的css更加的轻灵吧。