对于line-height的认识

在写我对line-height的认识之前，我想每一个人都应该搞清楚下面这个情况。
当给一个空div里面添加文字时，这个div的高度是怎么来的？
也许有很多朋友认为是由font-size决定的，但事实上这个元素的高度是由line-height决定的。下面我们可以通过例子来证明一下这个结论。
情况一：

在这里，我们将元素的font-size设置为30px,同时将line-height设置为0。这个时候通过检查元素看到该div的高度其实是并没有被撑开的，而是0；
情况二：


与上一个相反，我们将元素的line-height设置为30px,同时将font-size设置为0。但是这个时候虽然我们看不到文字，但是div的高度是被撑开了。

经过上面的两个例子，我们就可以得到最开始的结论：空div的高度是由line-height决定的。

接下来我们需要了解的是line-height对于内联元素和块级元素的影响。首先大家都知道内联元素分为替换元素和非替换元素。关于什么是替换元素和非替换元素的问题这里我就不讲解了。

现在我们先来了解line-height对于非替换元素的作用和影响。用一句话总结就是：非替换元素的高度完全由line-height决定。证明的话这里也就不列举了，大家可以自己试试。

下面轮到了替换元素和块级元素。
关于替换元素的高度与line-height的关系首先需要弄明白这个问题：line-height可以影响替换元素吗？答案是：不可以！
可能有些朋友会质疑，那我们来看一下面这个例子：


可以看到，select元素的高度并没有因为设置line-height为200px而改变。
对于块级元素，line-height对其本身是没有任何作用的，我们平时改变line-hieght，块级元素的高度跟着变化实际上是通过改变块级元素里面内联级别元素占据的高度实现的。比如开始的例子，实际上块级元素里面内联级别元素就是文字。

接下来，我想在这里给大家讲解一下line-height的继承问题。在讨论中这个问题之前，首先我们需要搞清楚line-height都有哪些属性以及这些属性对应的属性值。

• 数值：如line-heigth：1.5，其最终的计算值和当前的font-size相乘后的值。例如：假设我们此时的font-size大小是14px，则此时line-height就是1.5*14px = 21px；
• 百分比值：如line-height：150%，其最终的计算值和当前的font-size相乘后的值。例如：假设我们此时的font-size大小是14px，则此时line-height就是150%*14px = 21px；

• 长度值：也就是带单位的值，line-heigth：21px或者line-height：1.5em，此处em是一个相对于font-size的相对单位，因此其最终的计算值和当前的font-size相乘后的值。例如：假设我们此时的font-size大小是14px，则此时line-height就是1.5*14px = 21px；
  乍一看，似乎line-height：1.5，line-height：150%以及line-height：1.5em的最终效果都是一样的，但是实际上，line-height：1.5和其他两个市有区别的，那就体现在继承方面上。

• 如果使用数值作为line-hieght的属性值，那么所有的子元素继承的都是这个值，比如：
  line-height：1.5，那么子元素继承的就是1.5；

• 如果使用百分比值或者长度值作为属性值，那么所有的子元素都继承的是最终的计算值。比如：line-height：1.5em或者line-height：150%，font-size：14px，那么子元素继承的是1.5*14px = 21px；

最后，在这里我再继续问大家一个问题，具体如下：

此时.box和.box1的高度分别是多少？
正确的答案是：全都是96px！不相信的朋友可以自己亲自试试验证一下。
关于这个问题，也就是说：无论内联元素line-height怎么设置，最终父元素的高度都是由数值大的line-height决定的，我们可以将它称为“内联元素line-height的大值特性”。