[前端日记]0.x.2/line-height: 2/2em的区别

前置知识

---

今天来说说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值计算得到；

总结

1. 用有单位的（%，em），子元素继承父元素算出的行高，用无单位的，仅继承父元素的行高系数，子元素的行高各自计算；
2. 单位的，先换算再继承；不带单位的，先继承系数，再各自换算；

推荐用法

---

官方推荐使用无单位数值来给line-height优先赋值

带单位的line-height会忽略元素本身的font-size，而是继承父元素的font-size来计算行高
不带单位的line-height则是用元素本身的font-size来计算行高，因此更符合直觉，避免出现不可预期的问题。

---

这是对line-height的一点总结，希望能发掘，分享更多的CSS知识点。