一般認為網頁設計行內替換元素有固有的高度和寬度,例如,一個圖像的高度和寬度可能是某個像素數。因此,有固有高度的替換元素可能導致行框比正常要高。這不會改變行中任何元素的line-height值,包括替換元素本身。相反,只是會讓行框的高度恰好能包含替換元素(以及所有框屬性)。換句話說,會用替換元素整體(包括內容、外邊距、邊距和內邊距)來定義元素的行內框。以下樣式就能得到這樣一個例子。
你可能會盡力避免行內非替換元素的背景重疊,盡管如此,這種情況還是可能發生,這取決于使用何種字體。問題在于一個字體的em框與其字符字形之間可能存在差別??梢钥吹?,對于大多數字體,其em框的高度與字符字形的高度都不一致。
這聽上去可能很抽象,不過有很實際的后果。網站建設CSS2.1中指出:“內容區的高度應當基于字體,但是這個規范并沒有指定如何基于字體確定內容區的高度。用戶代理可能……使用em框,也可能使用字體的最大上升變形和下降變形(如果使用字體的最大上升變形和下降變形,能確保字形中落在em框上面或下面的部分仍在內容區內,但是這樣一來,不同的字體會有不同大小的框)?!?/p>
換句話說,一個行內非替換元素的“繪制區”要由用戶代理來決定。如果一個用戶代理使em框的高度作為內容區的高度,那么行內非替換元素的背景就與em框的高度相等(即值font-size),如果用戶代理使用字體的最大上升變形和下降變形,背景就可能比ex框高或矮。因此,盡管可以為行內非替換元素指定line-height 為1em,但其背景還是有可能與其他行的內容重疊。
在CSS2或CSS2.1中沒有辦法避免這種重疊,不過已經建議網站建設CSS3增加一些屬性,允許創作人員對用戶代理的行為進行控制。在這些屬性得到廣泛實現之前,用CSS 無法得到真正準確的格式編排。
p {font-size: 15px; line-height: 18px;}
img (height: 30px; margin: 0; padding: 0; border: none;}
圖7-44:替換元素可以增加行框的高度,但不影響line-height值
盡管有所有這些空白,但段落或圖像本身的line-height有效值并沒有因此改變。line-height:對圖像的行內框沒有任何影響。由于圖7-44中的圖像沒有內邊距、外邊距或邊框,其行內框與其內容區相同,在這里就是30像素高。
然而,網頁設計行內替換元素還是有一個line-height值。為什么呢?在最常見的情況下,行內替換元素需要這個值,從而在垂直對齊時能正確地定位元素。例如,要記住,vertical-align的百分數值要相對于元素的line-height來計算。所以:
p {font-size: 15px; line-height: 18px;}
img {vertical-align: 50%;}
<p>The image in this sentence <img src="test.gif" alt="test image">
will be raised 9 pixels.</p>
line-height的繼承值使圖像上升9個像素(而不是其他數字)。如果沒有line-height值,它就無法完成百分數值指定的垂直對齊,對于垂直對齊來說,圖像本身的高度無關緊要,關鍵是line-height的值。
不過,對于網頁設計其他替換元素,將line-height值傳遞到該替換元素中的后代元素可能很重要。SVG圖像就是這樣一個例子,它使用CSS對圖像中的所有文本設置樣式。
當前文章標題:網頁設計中的內容區
當前URL:http://www.0b2nu.cn/news/wzzz/content-area..html
上一篇:網頁設計中的增加框屬性
下一篇:網頁設計中的替換元素