TA貢獻(xiàn)1847條經(jīng)驗(yàn) 獲得超7個贊
首先，line-height并不是有時候是繼承的，而是所有時候都是繼承的，這個屬性就是繼承性的；
其次，line-height會因?yàn)樵O(shè)置不同的值類型，會有不同的表現(xiàn)。
line-height的語法：
line-height: normal | <number> | <length> | <percentage> | inheritnormal :默認(rèn)值，根據(jù)瀏覽器不同表現(xiàn)值在1.0~1.2之間；number : 數(shù)字相對值，例如：1.2，2，1.75，計算后的實(shí)際行高值是：數(shù)值*該元素的font-size length：帶單位的絕對值，例如：2em, 1rem, 20px。根據(jù)單位計算出來的絕對值。 percentage: 百分比值，計算行高值是 百分比*該元素計算后的font-size值
如果不對一個元素設(shè)置line-height值，這個元素并不會就沒有l(wèi)ine-height值，而是會從最近的有l(wèi)ine-height屬性值的父元素繼承，并且繼承的是計算后的line-height值。
比如，div>p結(jié)構(gòu)
(1)div：line-height:2,font-size:15px,
p:font-size:30px;
當(dāng)p繼承了div的line-height:2;當(dāng)line-height值為數(shù)字時，實(shí)際的p的行高值會乘以font-size, 此時div高是30px, p的高是60px
(2)div：line-height:200%,font-size:15px,
p:font-size:30px;
百分比是一個絕對值，div實(shí)際計算行高是200%*15=30px，p繼承div的行高也是30px
(3)div：line-height:30px/3em,font-size:15px,
p:font-size:30px;
行高是這種帶單位的絕對值時，p繼承的也是一個絕對值，div行高是30px或者3*15px=45px;
p也是相應(yīng)的30px或者45px;
(4）如果你給p設(shè)置了一個行高，那p的行高大小和div就沒太大關(guān)系了，只跟p的行高值類型相關(guān)。
div：line-height:200%,font-size:15px,
p:font-size:30px;
p line-height:20px ==> 20px
p line-height:1.5em ==> 1.5*30px =45px
p line-height:1.5 ==> 1.5*30px = 45px;
p line-heigth:200% ==> 200%*30px =60px;
p line-height:1.2rem ==> 1.5*16px(html) = 19.2px;
因?yàn)閞em的值是相對于根元素的font-size，默認(rèn)的<html>的font-size是16px；
至于什么時候用什么，則就根據(jù)需求了。
舉報