答案為:
line-height: 2 表示單行文本的行高為它本身的兩倍
line-height: 200% 表示單行文本的行高為系統(tǒng)默認(rèn)字體的200%
在繼承性上:
對父元素設(shè)置了line-height: 2后,父元素的子元素會繼承l(wèi)ine-height: 2這個屬性东臀,子元素的行高都是自身高度的2倍拧略,是相對大小,子元素的字體大小不同寒锚,行高也會不同;
對父元素設(shè)置了line-height: 200%后,父元素的子元素會繼承系統(tǒng)默認(rèn)字體的200%刹前,是一個固定的值泳赋,是固定大小,子元素的字體大小不同喇喉,行高都是固定某個值祖今;
實(shí)際寫代碼驗(yàn)證下,看看對不對
瀏覽器:chrome(Chrome的默認(rèn)字體大小為16px)
代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>line-height: 2;</title>
<style>
.one {
line-height: 3; /*為了更好的區(qū)分拣技,這里設(shè)置為3*/
}
.two {
line-height: 200%;
}
</style>
</head>
<body>
<div class="one">
line-height應(yīng)該是他本身字體16px的3倍
</div>
<div class="two">
line-height應(yīng)該是系統(tǒng)默認(rèn)字體16px的200%
</div>
</body>
</html>
頁面效果
line-heigh屬性0001.png
CSS中l(wèi)ine-height: 3;盒模型查看
line-heigh屬性0002.png
去掉樣式line-height: 3;看看
line-height0003.png
CSS中l(wèi)ine-height: 200%;盒模型查看
line-height0004.png
去掉樣式line-height: 200%;看看
line-height0005.png
繼承性
對父元素設(shè)置line-height:2千诬;
line-height0006.png
line-height0007.png
對父元素設(shè)置line-height:200%;
line-height0008.png
line-height0009.png