前置知识
今天来说说CSS中我们必须了解，但大多数人并没有理解透彻的行高。
首先，我们来了解一些基本概念：
-
行高：指的是文本间上下基线的垂直距离，也就是
baseline，该属性会影响行框的布局。 - 行距&半行距：（line-height - font-size） / 2后的这段空间分别加在了一个文本内容的顶部和底部，我们称之为半行距，行距就是上一行的底线和下一行的顶线之间的距离。
-
font-size：同一行顶线与底线之间的垂直距离等于
font-size大小。
可以包含这些内容的框我们叫它行框。
具体关系如下图
pic
取值
根据[官方文档]（https://www.w3.org/wiki/CSS/Properties/line-height）,line-height的常见取值如下：
齐
| 值 | 描述 |
|---|---|
| normal | 浏览器默认，一般为1.2。 |
| number | 设置数字，此数字会与当前的font-size相乘 |
| length | 设置固定的行间距 |
| % | 基于当前字体尺寸的百分比 |
| inherit | 规定应该从父元素继承line-height属性的值 |
lien-height是可继承属性，他的继承规则容易混淆。
继承问题
line-height较容易混淆的就是其不同取值间继承规则的区别。首先需要说明，line-height的大小与font-size息息相关。我们除了直接指定一个元素的行高外，其余都是基于font-size计算出来的。
-
inherit
继承父元素line-height的值，如果后代元素没有line-height，也会是这个值。 - length
line-height: 20px;
如上，行高就是指定的20px，与font-size无关。同样也会被后代元素继承。
- 带单位，如px、em、%
line-height: 200% | 2em;
按照声明line-height处的font-size来计算出子元素的line-height
- 不带单位，纯数字
line-height: 2;
相当于改变了normal（浏览器默认的行高系数），指定了一个自定义的值。
按照每个元素继承的或者是声明的（自己申声明的比继承的优先级更高）font-size值计算得到；
总结
- 用有单位的（%，em），子元素继承父元素算出的行高，用无单位的，仅继承父元素的行高系数，子元素的行高各自计算；
- 单位的，先换算再继承；不带单位的，先继承系数，再各自换算；
推荐用法
官方推荐使用无单位数值来给line-height优先赋值
带单位的line-height会忽略元素本身的font-size，而是继承父元素的font-size来计算行高
不带单位的line-height则是用元素本身的font-size来计算行高，因此更符合直觉，避免出现不可预期的问题。
这是对line-height的一点总结，希望能发掘，分享更多的CSS知识点。
网友评论