css中的line-height
line-height
line-height是一个比较常用的属性。我们常用的场合有两个：
- 一是设置两段文字在垂直方向上的间距
- 二是line-height和height相等，让单行文字垂直居中。
但它还有一些额外的东西是我们需要知道的
概要：
- line-height是可以继承的。
- p的高度不是由文字撑起来的。
- 单行文本垂直居中一定要设置height吗？
- line-height:1.5和line-height:150的区别
基本介绍
line:行 height：高度。和在一起，就是“行高”。行高这个词在word中也会出现，它的功能是设置一行文本所占的高度。当一段文字中有很多行时，设置它的值，可以调整多行文字之间的垂直方向的间距。
查看body的line-height属性
由于line-height属性是可以继承的，所以在最初的情况下，我们应该去body标签上去查询line-height的值。有两种方法去查看：
- 通过开发者工具查看。写一个空白的html文档，用浏览器打开。调出开发者工具，选中body标签。然后就可以在computed面板中找到body的全部css属性了。
- 通过js代码。
getComputedStyle(document.body)["lineHeight"]。
我测试的情况如下：
另外edge 和qq浏览器中这个值都是18px。不确定chrome浏览器中的“normal”是什么值。
可能在不同的浏览器下，line-height的值会有一些不同（这一点我不是很确定），所以一般在做css重置时，也加上去line-height的设置。
如
（来源：taobao 页）
（来源：简书）
由于line-height有继承性，也就是说如果一个元素你没有明确地指明它的line-height，则它会去使用离它最近的父级（包括祖辈）元素的line-height。
如上图中，“第一句话”使用了body的line-height，“第二句话”使用了div 的line-height，它们的不同高度说明了这个问题。
p标签的高度是由font-size决定的吗？
我们会很自然也认为p标签中有一些文字，那么p标签的高度就应该是由内部的文字撑起来的，而文本的大小是 由font-size来决定的，所以，p的高度也是由font-size的大小决定的。
实践证明，不是。
上面的代码中，可以看到，p中的font-size设置为了0，所以其中文字看不见了，但p仍然占据网页中的空间。因为它的line-height为50.如果我们把font-size和line-height的值交换下，会怎么样呢？
你可以看到，灰色的部分才是p的真正高度。
所以，p的高度并不是由font-size决定的，而是由line-height决定的。
单行文字的垂直居中需要设置height吗？
我们经常会看到类似于这样的写法；
div{height:50px;line-height:50px;}
这里的height:50px;是必须要的吗？
试试下面的代码：
<div style="line-height:80px;font-size:30px;background:#d1d1d1;">我是第一行</div>
<div style="line-height:80px;font-size:40px;background:#ddd;">我是第二行</div>
<div style="line-height:80px;font-size:60px;background:#ccc;">我是第三行</div>
我并没有设置它们的height值，你觉得这三行字还是处于垂直居中的状态吗？
结果是：三个div中的文字也是垂直居中的。
所以，如果你只是为了实现如题的目标，那么想想你是否真的需要height的设置。
line-height:1.5和line-height:150%有区别吗？
看如下代码：
<div style="line-height:150%;background:#ccc;">我是第一行</div>
<div style="line-height:1.5;background:#ddd;">我是第二行</div>
结果显示，这两行的文字的行高是相等的：24px。由于这里浏览器默认的字体大小是16px,所以line-height都变成了16*1.5=24px。
在这种情况下，文本中的line-height不涉及从哪里继承过来，都是在自己的标签上设置的。
再看下面的代码。
与上面的代码相比有两点不同：
- 因为p标签上没有设置line-height，所以这里的文字的line-height要从它的父级元素的设置中继承过来。
- 为了让文本换行，我加一个p标签的width。当然这只是为了看出效果。
<div style="line-height:150%;background:#ccc;">
<p style="font-size:30px;width:100px;">我是第一行</p>
</div>
<div style="line-height:1.5;background:#ddd;">
<p style="font-size:30px;width:100px;">我是第二行</p>
</div>
结果是：
很明显，两段文本的行高不一样的了。
解释如下：
对于line-height:150%，它先把自己的行高值算出来：150%*默认的字体大小16px = 24px。然后把这个24传给“我是第一行”，所以第一行文本的行高就是24px。理解就是，它不能把150%直接传给后代，而自己先算一个具体的px，传给下一代元素。
对于line-height:1.5。它自己把这个值传给了子元素p，所以p的行高是:1.5*自己的字体大小30px = 45px。理解是，1.5是一个值，可以直接向下一代元素传递。
结论：
百分值：先根据自己的font-size算出具体的line-height，直接把这个算出来的结果给下一代使用。
数值：直接把这个数值传给后代，让它们自己去再去根据自己的font-size*数值 得到自己的line-height。
你会了吗？真的会了吗？
好吧，你自己算下下面的代码中每个p中line-height是多少。
<div style="line-height:150%;background:#ccc;">
<p style="font-size:30px;width:100px;">我是第1.1行</p>
<p style="font-size:40px;width:100px;">我是第1.2行</p>
</div>
<div style="line-height:1.5;background:#ddd;">
<p style="font-size:30px;width:100px;">我是第2.1行</p>
<p style="font-size:40px;width:100px;">我是第2.2行</p>
</div>
最后：你还是直接使用类似于1.5这样的数值吧（淘宝也是这样做的嘛），不要用百分比了。
