網(wǎng)頁設(shè)計(jì)中的內(nèi)容區(qū)

  • 2018-11-02 17:05:17
  • 閱讀次數(shù):
  • 作者:盈嵐科技小編
  • 來源:http://m.iy5y368.cn

行內(nèi)替換元素

一般認(rèn)為網(wǎng)頁設(shè)計(jì)行內(nèi)替換元素有固有的高度和寬度,例如,一個(gè)圖像的高度和寬度可能是某個(gè)像素?cái)?shù)。因此,有固有高度的替換元素可能導(dǎo)致行框比正常要高。這不會(huì)改變行中任何元素的line-height值,包括替換元素本身。相反,只是會(huì)讓行框的高度恰好能包含替換元素(以及所有框?qū)傩裕?。換句話說,會(huì)用替換元素整體(包括內(nèi)容、外邊距、邊距和內(nèi)邊距)來定義元素的行內(nèi)框。以下樣式就能得到這樣一個(gè)例子。

字形與內(nèi)容區(qū)

你可能會(huì)盡力避免行內(nèi)非替換元素的背景重疊,盡管如此,這種情況還是可能發(fā)生,這取決于使用何種字體。問題在于一個(gè)字體的em框與其字符字形之間可能存在差別??梢钥吹?,對(duì)于大多數(shù)字體,其em框的高度與字符字形的高度都不一致。

這聽上去可能很抽象,不過有很實(shí)際的后果。網(wǎng)站建設(shè)CSS2.1中指出:“內(nèi)容區(qū)的高度應(yīng)當(dāng)基于字體,但是這個(gè)規(guī)范并沒有指定如何基于字體確定內(nèi)容區(qū)的高度。用戶代理可能……使用em框,也可能使用字體的最大上升變形和下降變形(如果使用字體的最大上升變形和下降變形,能確保字形中落在em框上面或下面的部分仍在內(nèi)容區(qū)內(nèi),但是這樣一來,不同的字體會(huì)有不同大小的框)?!?/p>

換句話說,一個(gè)行內(nèi)非替換元素的“繪制區(qū)”要由用戶代理來決定。如果一個(gè)用戶代理使em框的高度作為內(nèi)容區(qū)的高度,那么行內(nèi)非替換元素的背景就與em框的高度相等(即值font-size),如果用戶代理使用字體的最大上升變形和下降變形,背景就可能比ex框高或矮。因此,盡管可以為行內(nèi)非替換元素指定line-height 為1em,但其背景還是有可能與其他行的內(nèi)容重疊。

在CSS2或CSS2.1中沒有辦法避免這種重疊,不過已經(jīng)建議網(wǎng)站建設(shè)CSS3增加一些屬性,允許創(chuàng)作人員對(duì)用戶代理的行為進(jìn)行控制。在這些屬性得到廣泛實(shí)現(xiàn)之前,用CSS 無法得到真正準(zhǔn)確的格式編排。

p {font-size: 15px; line-height: 18px;}

img (height: 30px; margin: 0; padding: 0; border: none;}

圖7-44:替換元素可以增加行框的高度,但不影響line-height值

盡管有所有這些空白,但段落或圖像本身的line-height有效值并沒有因此改變。line-height:對(duì)圖像的行內(nèi)框沒有任何影響。由于圖7-44中的圖像沒有內(nèi)邊距、外邊距或邊框,其行內(nèi)框與其內(nèi)容區(qū)相同,在這里就是30像素高。

然而,網(wǎng)頁設(shè)計(jì)行內(nèi)替換元素還是有一個(gè)line-height值。為什么呢?在最常見的情況下,行內(nèi)替換元素需要這個(gè)值,從而在垂直對(duì)齊時(shí)能正確地定位元素。例如,要記住,vertical-align的百分?jǐn)?shù)值要相對(duì)于元素的line-height來計(jì)算。所以:

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個(gè)像素(而不是其他數(shù)字)。如果沒有l(wèi)ine-height值,它就無法完成百分?jǐn)?shù)值指定的垂直對(duì)齊,對(duì)于垂直對(duì)齊來說,圖像本身的高度無關(guān)緊要,關(guān)鍵是line-height的值。

不過,對(duì)于網(wǎng)頁設(shè)計(jì)其他替換元素,將line-height值傳遞到該替換元素中的后代元素可能很重要。SVG圖像就是這樣一個(gè)例子,它使用CSS對(duì)圖像中的所有文本設(shè)置樣式。

當(dāng)前文章標(biāo)題:網(wǎng)頁設(shè)計(jì)中的內(nèi)容區(qū)

當(dāng)前URL:http://m.iy5y368.cn/news/wzzz/content-area..html

上一篇:網(wǎng)頁設(shè)計(jì)中的替換元素

網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷咨詢專線:181-8386-5875(點(diǎn)擊可一鍵撥號(hào))