line-height是什么?三种赋值方式有何区别?

line-height定义了一行文本的高度,它包括了字符间的间距,实际上是从一行的基线到下一行的基线的距离。如果一个标签没有定义height属性,那么它的高度将由line-height决定。如果一个容器没有设置高度,那么撑开容器高度的是line-height,而不是容器内的文本内容。通过将line-height的值设置为与height相同的值,可以实现单行文本的垂直居中。line-heightheight都可以撑开一个高度,但height会触发haslayout(这是一个旧版本IE的特性),而line-height则不会。

三种赋值方式有何区别?

  • 带单位:px 是固定值,而 em 会参考父元素 font-size 值计算自身的行高
  • 纯数字:会把比例传递给后代。例如,父级行高为 1.5,子元素字体为 18px,则子元素行高为 1.5 * 18 = 27px
  • 百分比:将计算后的值传递给后代

你可能感兴趣的:(前端,css,javascript)