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這樣的數值吧（淘寶也是這樣做的嘛），不要用百分比了。