line height 最好不帶單位

2021-06-19 12:52:40 字數 1397 閱讀 9069

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 ...