前言：平常寫(xiě)CSS習(xí)慣性的寫(xiě) line-height: 1.5em，也見(jiàn)過(guò)類似line-height: 1.5，line-height: 150%這種寫(xiě)法酝掩，但是從來(lái)沒(méi)有想過(guò)這三者有什么區(qū)別稀拐，最近突然看到有人提到這個(gè)問(wèn)題，很感興趣俗冻，于是查資料自己嘗試了一下。
首先有一點(diǎn)要明確的是，line-height是具有繼承性的屋剑，如果直接在某個(gè)元素上使用line-height，那么這三種寫(xiě)法是沒(méi)有區(qū)別的诗眨，比如給所有的p標(biāo)簽添加行高屬性：
p{line-height: 1.5em;}
p{line-height: 1.5;}
p{line-height: 150%;}
最后的效果是一樣的唉匾。
這三種方式的區(qū)別在于，給父元素設(shè)置行高的時(shí)候子元素的繼承方式匠楚。
假如我們有一個(gè)父div類名為parent1巍膘，另一個(gè)父div類名為parent2卫病，均包含了一個(gè)類名為child的子div，HTML結(jié)構(gòu)如下：
<div class="parent1">
<div class="child">line-height: 1.5em;</div>
</div>
<br><br>
<div class="parent2">
<div class="child">line-height: 1.5;</div>
</div>
CSS如下：
.parent1{
font-size:14px;
line-height: 1.5em;
background: #999;
padding:10px
}
.parent2{
font-size:14px;
line-height: 1.5;
background: #999;
padding:10px
}
.child{
font-size:26px;
background: #ccc;
}
此時(shí)的頁(yè)面如下截圖：
可以看到典徘，當(dāng)設(shè)置line-height: 1.5em時(shí)蟀苛，很明顯子div的文字已經(jīng)超出自己的行高范圍了，設(shè)置line-height: 1.5時(shí)子div的文字沒(méi)有超出自己的行高逮诲。
這是由于CSS繼承時(shí)的計(jì)算方式區(qū)別造成的帜平，如示例，當(dāng)我們給類名為parent1的父div設(shè)置line-height：1.5em時(shí)梅鹦，該div的font-size為14裆甩，此時(shí)經(jīng)過(guò)計(jì)算父div的line-height為14px*1.5=21px，然后子div的line-height就會(huì)繼承21px這個(gè)值齐唆，而子div的font-size為26px嗤栓，自然會(huì)超出自己的行高范圍。
而當(dāng)我們給類名為parent2的父div設(shè)置line-height：1.5時(shí)箍邮，子div會(huì)直接繼承line-height：1.5茉帅，然后計(jì)算26px*1.5=39px，不會(huì)超出自己的行高范圍锭弊。
經(jīng)過(guò)測(cè)試line-height: 150%和line-height: 1.5em相同堪澎，都是先計(jì)算然后把固定的行高繼承給子元素，所以我們可以總結(jié)一下味滞，繼承l(wèi)ine-height的時(shí)候樱蛤，帶單位的先計(jì)算再繼承，不帶單位的直接繼承剑鞍。
以上就是我對(duì)line-height這個(gè)屬性一點(diǎn)淺顯的認(rèn)識(shí)昨凡。
參考資料：http://www.cnblogs.com/fengzheng126/archive/2012/05/18/2507632.html
