|
line-height的屬性值：
normal：根據(jù)瀏覽器決定,，一般為1.2,。
number：僅指定數(shù)字時（無單位）,，實際行距為字號乘以該數(shù)字得出的結(jié)果,。可以理解為一個系數(shù),，子元素僅繼承該系數(shù),，子元素的真正行距是系數(shù)與自身元素字號相乘的結(jié)果。大多數(shù)情況下推薦使用,，可以避免一些意外的繼承問題,。
length：具體的長度，如px/em等,。
percentage：百分比,，100%與1em相同。
測試代碼：
02 | .outer01,.outer02,.outer03{font-size:12px;} |
03 | .outer01{line-height:1.5} |
04 | .outer02{line-height:150%;} |
05 | .outer03{line-height:1.5em} |
06 | .inner{font-size:24px;} |
09 | <span class="inner">demo</span> //computed 1.5*24px=36px |
10 | <span class="inner2">demo</span> //computed 1.5*12px=18px |
14 | <span class="inner">demo</span> //computed 1.5*12px=18px |
15 | <span class="inner2">demo</span> //computed 1.5*12px=18px |
19 | <span class="inner">demo</span> //computed 1.5*12px=18px |
20 | <span class="inner2">demo</span> //computed 1.5*12px=18px |
測試結(jié)果：
從上例測試結(jié)果可以看出line-height:1.5 與 line-height:150%的區(qū)別主要是繼承性,，
150%,，1.5em是根據(jù)父元素的字體大小計算出行高，并且子元素依然沿用這個計算后的行高,。
而1.5則是子元素根據(jù)自己字體的大小去乘以從父元素繼承來的行高來計算,。
|
