網(wǎng)頁(yè)設計中的內容區

  • 2018-11-02 17:05:17
  • 閱讀次數:次
  • 作者:盈嵐科技小編
  • 來(lái)源:http://amzcoolest.com

行內替換元素

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

字形與內容區

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

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

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

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

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

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

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

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

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

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è)像素(而不是其他數字)。如果沒(méi)有line-height值,它就無(wú)法完成百分數值指定的垂直對齊,對于垂直對齊來(lái)說(shuō),圖像本身的高度無(wú)關(guān)緊要,關(guān)鍵是line-height的值。

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

當前文章標題:網(wǎng)頁(yè)設計中的內容區

當前URL:http://amzcoolest.com/news/wzzz/content-area..html

上一篇:網(wǎng)頁(yè)設計中的增加框屬性

下一篇:網(wǎng)頁(yè)設計中的替換元素

網(wǎng)站建設、網(wǎng)絡(luò )營(yíng)銷(xiāo)咨詢(xún)專(zhuān)線(xiàn):181-8386-5875(點(diǎn)擊可一鍵撥號)
亚洲精品无码mv在线|新国产精品视频福利免费|日韩高清在线观看不卡一区二区|一本久久a久久精品免费不|亚洲私人无码内射免费观看