網(wǎng)頁(yè)設計中的塊級元素一

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

百分數高度

前面已經(jīng)了解了如何處理設置為長(cháng)度值的高度,下面再花點(diǎn)時(shí)間介紹網(wǎng)頁(yè)設計中百分數高度。如果一個(gè)塊級正常流元素的height設置為一個(gè)百分數,這個(gè)值則是包含塊height的一個(gè)百分數。給定以下標記,相應的段落高度將是3em:

<div style="height: 6em;">

<p style="height: 50%;">Half as tall</p>

由于將上、下外邊距設置為auto時(shí),實(shí)際上它們的高度將是0,因此,網(wǎng)頁(yè)設計中將元素垂直居中的唯一辦法就是把上、下外邊距都設置為25%。

不過(guò),如果沒(méi)有顯式聲明包含塊的height,百分數高度會(huì )重置為auto,如果修改上例,使div的height為auto,段落將與div本身的高度完全相同:

<div style="height: auto;">

<p style="height: 50%;">NOT half as tall; height reset to auto</p>

</div>

這兩種可能性在圖7-16中做了展示(段落邊框和div邊框之間的間隔是段落的上、下外邊距)。

圖7-16:不同情況下的百分數高度auto高度

auto高度

在最簡(jiǎn)單的情況下,網(wǎng)頁(yè)設計中如果塊級正常流元素設置為height: auto。顯示時(shí)其高度將恰好足以包含其內聯(lián)內容(包括文本)的行盒。高度為auto時(shí),會(huì )在段落上設置一個(gè)邊框,并認為沒(méi)有內邊距,這樣下邊框剛好在文本最后一行的下面,上邊框則剛好在文本第一行的上面。

如果塊級正常流元素的高度設置為auto,而且只有塊級子元素,其默認高度將是從最高塊級子元素的外邊框邊界到最低塊級子元素外邊框邊界之間的距離。因此,子元素的外邊距會(huì )“超出”包含這些子元素的元素(這種行為將在下一節解釋?zhuān)?。不過(guò),網(wǎng)頁(yè)設計中如果塊級元素有上內邊距或下內邊距,或者有上邊框或下邊框,其高度則是從其最高子元素的上外邊距邊界到其最低子元素的下外邊距邊界之間的距離:

<div style="height: auto; background: silver;">

<p style="margin-top: 2em; margin-bottom: 2em;">A paragraph!</p>

</div>

<div style="height: auto; border-top: 1px solid; border-bottom: 1px solid; background: silver;">

<p style="margin-top: 2em; margin-bottom: 2em;">Another paragraph!</p>

</div>

這兩種行為都在圖7-17中得到了展示,

圖7-17:有塊級子元素且高度為auto

如果在上例中將邊框改為內邊距,對div高度的作用還是一樣:同樣會(huì )把段落的外邊距包含在內。

當前文章標題:網(wǎng)頁(yè)設計中的塊級元素一

當前URL:http://amzcoolest.com/news/wzzz/block-level-elements.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久久精品免费不|亚洲私人无码内射免费观看