7.3.3 行高的計算與繼承 以em、ex和百分比為單位的行高,其基數是元素本身的字型尺寸。例如有**如下:
字高20px,行高2em。
字高30px,行高2em。
2個段落的行高都為2em,但是字型大小不同,因此顯示如圖7-23所示。
圖7-23
行高的計算 行高可以設定得比字型高度小,此時多行的文字將疊加到一起,例如有如下**,其顯示如圖7-24所示。
p 字高20px,行高10px。此時多行的文字將疊加到一起。
圖7-24
比字型高度小的行高 行高是可繼承的,但是繼承的是計算值,例如有如下**:
p p span 字高20px。字高30px。
元素的行高2em,字型尺寸為20px,因此計算值為40px,雖然元素本身的字型尺寸為30px,不過其繼承的行高仍為40px。但是在不同的瀏覽器內顯示的效果卻不盡相同,如圖7-25所示。
圖7-25
行高的不同表現 由於繼承的是計算值,因此當元素內的文字字型尺寸不一樣的時候,如果設定固定的行高很可能造成字型的重疊,例如有如下**,其顯示如圖7-26所示。
p p span 字高20px,行高1em,當文字為多行時可能會發生文字重疊的想象。字高30px。
圖7-26
行高繼承造成文字疊加 為了避免這種情況,可以為每個元素單獨定義行高,但是這樣很煩瑣,因此可以定義乙個沒有單位的實數值作為縮放因子來統一控制行高,縮放因子是直接繼承的,而不是繼承計算值。例如修改上例中的行高為: p
則上例中的xhtml**顯示如圖7-27所示。
eric meyers 所寫的 unitless line-heights
line-height:150%;
之前有看過一篇 eric meyers 所寫的 unitless line-heights,說要避免在 line-height 上設定單位...
原因是 line-height 設定後,子節點所繼承的是經過運算後(computed)的 px 值、並不是等比的值。
但文章中沒有講到 % 是否可以用,所以我很自然地就把 150% = 1.5 畫上等號。
直到試著用 firebug 去改看看才發現問題,這兩個值居然是不相等的!
所以大家以後要乖一點,連百分比都不要設喔!
來自:
使用不帶單位的line height
line height是可以繼承的,所以子元素可以不用重複定義line height。我們一般也會在後面帶上單位 如 line height 22px 或是line height 1.4em 但line height給人帶來麻煩的地方也是這個繼承和後面加的單位。有的時候,我們為了實現單行文字的垂直居...
判斷Integer值相等最好不用
今天在開發中判斷兩個integer值相等,integer a 3 duixiang duixiang new duixiang duixiang dao.getduixiang integer b duixiang.getb system.out.print a b system.out.print...
lua中最好不要使用繼承
quick中提供了class 的語法糖,不建議在大型專案特別是伺服器中使用。無法保證繼承的效果,你會發現以下的問題 local a class a function a ctor self.m 0 endfunction a setm m self.m m endfunction a checkm ...