CSS中的line-height行高属性学习教程

看起来如此简单~但是，line-height是个可继承属性，它的继承规则有那么一点点复杂……

三、继承
需要提前说明的是：line-height的大小与font-size息息相关，除了指定line-height为多少px，剩下的设置方式都是基于font-size算出来的。 下面逐个讲一讲~
1.inherit：这个其实没什么说的，继承父元素line-height的值，所以父元素的是多少就是多少。 如果其后代元素不设置line-height 的话，也会是这个值。
2.length：假设设置 line-height 为20px，那么该行的该行的行高就是20px，与 font-size 无关，不会随着 font-size 做相应比例的缩放。 这个长度值（20px）会被后代元素继承，所有的后代元素会使用这个相同的、继承的 line-height (20px)，除非后代元素设定 line-height 。
3.百分比：假设自身的 font-size 为16px，line-height 设为120%。那么其行高为：16 * 120% = 19.2px。即 line-height 是根据自身的 font-size 计算出来的。 子元素会继承父元素的line-height，那么它继承的是什么呢，百分比（120%）？还是19.2px？ 答案是后者，19.2px，即父元素line-height计算后的最终值。（这个我们稍后还会举例子来看）
4.normal：line-height 设置为 normal 的时候，行高取决于浏览器的解析，一般是1.2。 与前面不同的是，line-height 设置为 normal 的元素，其子元素不再继承其line-height计算后的最终值，而是根据子元素自身的 font-size 进行计算。见下表~

可见，子元素随着自身 font-size 的大小而做相应比例的缩放。
纯数字 如果既想要 normal 的灵活，又想设置一个自定义的值，那就要用 纯数字 啦~ 纯数字方式与 normal 唯一的不同，就是数值的大小，纯数字可以自己随意设定，而 normal 的值是浏览器决定的。

其后代元素会继承这个数值（比如 1.5），然后根据自身的 font-size 算出自身的line-height。
总结如下：