一、區別
區別體現在子元素繼承時，如下：
- 父元素設置line-height:1.5會直接繼承給子元素，子元素根據自己的font-size再去計算子元素自己的line-height。
- 父元素設置line-height:150%是計算好了line-height值，然后把這個計算值給子元素繼承，子元素繼承拿到的就是最終的值了。此時子元素設置font-size就對其line-height無影響了。
二、舉例
比如父元素設置屬性：font- size:14px;line-height:1.5,child設置font-size:26px;
那么父元素：line-height = 14px * 1.5 = 21px，子元素：line-height = 26px * 1.5 = 39px。
父元素設置屬性：font-size:14px;line-height:150%,child設置font-size:26px;
那么父元素：line-height = 14px * 150% = 21px，子元素：line-height = 父元素的line-height = 21px。
<!DOCTYPE html> <html> <meta charset="utf-8"/> <head> <title></title> <style type="text/css"> .father { width: 400px; border: 1px solid pink; display: inline-block; } .son { width: 350px; border: 1px solid green; } .father1 { font-size: 14px; line-height: 1.5; } .son1 { font-size: 26px; } .father2 { font-size: 14px; line-height: 150%; } .son2 { font-size: 26px; } </style> </head> <body> <div class="father father1"> 父元素font-size:14px;line-height:1.5;計算值是21px <div class="son son1"> 子元素font-size:26px;line-height會繼承父元素的1.5，計算值是39px </div> </div> <div class="father father2"> 父元素font-size:14px;line-height:150%;計算值是21px <div class="son son2"> 子元素font-size:26px;line-height=父元素的line-height=21px </div> </div> </body> </html>
本文作者starof,因知識本身在變化，作者也在不斷學習成長，文章內容也不定時更新，為避免誤導讀者，方便追根溯源，請諸位轉載注明出處：http://www.cnblogs.com/starof/p/4742323.html有問題歡迎與我討論，共同進步。