对 line-height 的理解
line-height
指一行字的高度,包含了字间距,实际上是下一行基线到上一行基线距离- 如果一个标签没有定义
height
属性,那么其最终表现的高度是由line-height
决定的 - 一个容器没有设置高度,那么撑开容器高度的是
line-height
而不是容器内的文字内容 - 把
line-height
值设置为height
一样大小的值可以实现单行文字的垂直居中 line-height
和height
都能撑开一个高度,height
会触发haslayout
,而line-height
不会
line-height 三种赋值方式
- 带单位:
px
是固定值,而em
会参考父元素font-size
值计算自身的行高 - 纯数字:会把比例传递给后代。例如,父级行高为
1.5
,子元素字体为18px
,则子元素行高为1.5 * 18 = 27px
- 百分比:将计算后的值传递给后代