好久没写页面的我,总结下
line-height知识点。
line-height的取值:
- 单位:
line-height: 26px,直接定义目标元素的行高为26px的高度。 - 百分比:
line-height: 150%,与自身的font-size有关,line-height值为:font-size值乘以150%。且如果其层叠子元素没有定义line-height属性,不管有没有定义font-size属性,其层叠子元素行高均为21px(与自身的font-size没有任何关系)。 - 倍数:
line-height:1.5,用该方式一般也是配合font-size属性使用,但是对层叠子元素的影响效果并不同,如果层叠子元素没有定义line-height属性,但是定义了font-size属性,那这些层叠子元素的行高为继承过来的line-height倍数值乘以自身的font-size属性。
为什么line-height能设置单行文本垂直居中对齐呢?
类似于用书写英语字母四条线格式,从上至下,依次为顶线、中线、基线和底线。line-height是行高,即行与行基线之间的距离。
line-height与font-size的计算值之差(也就是两行的“行间距”)分为两半,分别加到一个文本行内容的顶部和底部。所以当我们设置单行文本的line-height为所需要box的高度,即可实现垂直居中对齐。
参考文章:
CSS行高(line-height)及文本垂直居中原理
css行高line-height的一些深入理解及应用











网友评论