css的line-height:1.5,line-height:150%,line-height:1.5em,line-height:15px的差別

看到一道面試題據說是最基礎的東西，但是發現我還是不太清楚（css會用但是太細節的真心記不住）下面就在部落格上記錄一下：

首先要說一下line-height在api中的文法是：

line-height：normal | <length>| <percentage>| <number>；

line-height：主要是設計元素的行高，

我們現在這裡假設font-size：24px；

1.首先是px的，設定行高是15px的話，那麼我們得到的行高自然也是15px；沒什麼差別的；

2.如果是em的話，首先要看看預設的網頁的字型像素，通常都是16px，是以說1em=16px。而對于本文中設定了24px，是以說1.5em就是1.5*24=36px;就是說行高設定了36px；

3.下一種百分比，我們同樣要換算成px的，百分比也是基于目前字型尺寸的，100%=1em；在本題中是150%就是說為1.5em，就是1.5*24=36px；

4.最後一種是數值的，沒有任何的機關，也被稱為因子方式，使用因子方式定義line-height是非常安全的方式，将可以避免文字重疊的現象。因子方法的數值是縣繼承後計算的，而其他的三個是先計算在繼承的，是以如果說是按照理他最近的那個子元素的font-size乘上1.5；

最後用例子總結一下差別：

出一道題看看和你想的一樣嗎？：

以這個為例子第7行現在是1.5那麼結果就是，首先文字不會發生重疊，單行行高是1.5*48=72px；（注意因為這裡為了展現出重疊效果是以寫了大量的文字，總的行高是要在乘上行數的，不過一定是72的倍數）。

第7行是1.5em和150%或者是36px，最後都是單行行高為36px，和div2裡面的48沒關系，是有div1的24*1.5決定的。三者都會發生文字重疊現象......

大家可以自己試試，圖檔插不進來了

是以說這裡要知道的就是1em=16px=100%；