在前端樣式屬性中，我們經常會使用line-height這個屬性，在剛開始學習css的時候，很多人經常會直接把line-height的屬性值寫成固定值，比如line-height: 14px;，簡單粗暴，也能馬上看到效果。但是這種方法的缺點就是，到處寫line-height屬性，不易于代碼的后期維護。下面我們就line-height這個屬性做一個介紹：
首先，我們看下MDN上對line-height屬性取值的介紹：
normal
取決于用戶代理。桌面瀏覽器（包括火狐瀏覽器）使用默認值，約為1.2，這取決于元素的 font-family。
<number>
該屬性的應用值是這個無單位數字<number>乘以該元素的字體大小。計算值與指定值相同。大多數情況下，使用這種方法設置line-height是首選方法，在繼承情況下不會有異常，由此描述可見，number的計算值與文字本身的大小有關系，即`line-height : number * 文字本身的font-size`
<length>
指定<length> 用于計算 line box 的高度。查看<length> 獲取可能的單位。
<percentage>
與元素自身的字體大小有關。計算值是給定的百分比值乘以元素計算出的字體大小。，由此描述可見，number的計算值與文字本身的大小有關系，即`line-height : number * 父元素字體的font-size`
下面我們就來一一介紹下每種屬性的作用：
- normal
<div class="div" style="font-size:14px; line-height:normal;">
<p style="font-size:20px;">我是一個line-height</p>
<p style="font-size:30px;">我是一個line-height</p>
<p style="font-size:40px;">我是一個line-height</p>
</div>
normal
normal屬性是根據瀏覽器來計算行高的，父子元素都是。
- number
<div class="div" style="font-size:14px; line-height:1.4;">
<p style="font-size:20px;">我是一個line-height</p>
<p style="font-size:30px;">我是一個line-height</p>
<p style="font-size:40px;">我是一個line-height</p>
</div>
number
- length
<div class="div" style="font-size:14px; line-height:44px;">
<p style="font-size:20px;">我是一個line-height</p>
<p style="font-size:30px;">我是一個line-height</p>
<p style="font-size:40px;">我是一個line-height</p>
</div>
length
- percentage
<div class="div" style="font-size:14px; line-height:300%;">
<p style="font-size:20px;">我是一個line-height</p>
<p style="font-size:30px;">我是一個line-height</p>
<p style="font-size:40px;">我是一個line-height</p>
</div>
Paste_Image.png
從上面4張圖片，我們可以看出normal和number的字體分布是比較規則的，但是length和percentage就顯得有些不整齊，其原因就是normal和number都根據現實的字體本身處理成合適的行高，而length是設定成了固定的行高，percentage也是根據父元素font-size產生的行高，導致三段問題行高相同！
下面我們再根據一些實例來明顯的分辨出它們的不同
<div class="div" style="font-size:14px; line-height:normal;">
<p style="font-size:20px;">我是一個line-height</p>
<p style="font-size:30px;">我是一個line-height</p>
<p style="font-size:40px;">我是一個line-height</p>
</div>
<p class="line">-------------------------------------</p>
<div class="div" style="font-size:14px; line-height:1;">
<p style="font-size:20px;">我是一個line-height</p>
<p style="font-size:30px;">我是一個line-height</p>
<p style="font-size:40px;">我是一個line-height</p>
</div>
<p class="line">-------------------------------------
<div class="div" style="font-size:14px; line-height:14px;">
<p style="font-size:20px;">我是一個line-height</p>
<p style="font-size:30px;">我是一個line-height</p>
<p style="font-size:40px;">我是一個line-height</p>
</div>
<p class="line">-------------------------------------
<div class="div" style="font-size:14px; line-height:100%;">
<p style="font-size:20px;">我是一個line-height</p>
<p style="font-size:30px;">我是一個line-height</p>
<p style="font-size:40px;">我是一個line-height</p>
</div>
demo
由上圖可以看出，把行高設成normal或者合適的number比較合適，顯示起來的字體行高比較合適，當設置成固定行高或者百分比時，可能會導致字體顯示錯亂，或者我們為了修改這個問題在很多地方設置line-height，導致代碼維護很困難。
綜上所述，建立大家在需要設置行高時盡量使用line-height: 數值的方式，這里也能看出line-height設置成數字和百分比的區別。
