網(wǎng)頁設(shè)計中的垂直屬性

垂直格式化類似于水平格式化,塊級元素的垂直格式化也有自己一系列有意思的行為。一個元素的默認高度由其內(nèi)容決定。高度還會受內(nèi)容寬度的影響,段落越窄,相應(yīng)地就會越高,以便容納其中所有的內(nèi)聯(lián)內(nèi)容。

網(wǎng)站建設(shè)中,可以對任何塊級元素設(shè)置顯式高度,如果這樣做,其結(jié)果取決于另外一些因素。假設(shè)指定高度大于顯示內(nèi)容所需的高度:

<p style="height: 10em;">

在這種情況下,多余的高度會產(chǎn)生一個視覺效果,就好像有額外的內(nèi)邊距一樣。不過假設(shè)高度小于顯示內(nèi)容所需的高度:

<p style="height: 3em;">

如果是這樣,瀏覽器會提供某種方法來査看所有內(nèi)容,而不是增加元素框的高度。瀏覽器可能會向元素增加一個滾動條,如圖7-13所示,

圖7-13:高度與元素內(nèi)容高度不匹配

如果元素內(nèi)容的高度大于元素框的高度,用戶代理的具體行為將取決于overflow屬性的值(及用戶代理對這個屬性的支持程度)。這種情況將在第10章討論。

網(wǎng)站建設(shè)中,如果元素不是替換元素(如圖像),用戶代理會忽略除auto以外的所有其他height:值。在CSS2和CSS2.1中,height值不能忽略,只有一種特定情況除外,即如果涉及到百分數(shù)值,也許會忽略height值,這種情況稍后討論。

像width—樣,height定義了內(nèi)容區(qū)的高度,而不是可見元素框的高度。元素框上下的內(nèi)邊距、邊距或外邊距都會增加到height值。

垂直屬性

與水平格式化的情況一樣,網(wǎng)頁設(shè)計中垂直格式化也有7個相關(guān)的屬性:margin-top、border-top、padding-top、height、 padding-bottom,border-bottom和margin-bottom 這些屬性如圖7-14所示。

圖7-14:垂直格式化的“7大屬性”

這7個屬性的值必須等于元素包含塊的height。這往往是塊級元素父元素的height值(因為塊級元素的父元素幾乎都是塊級元素)。

這7個屬性中只有3個屬性可以設(shè)置為auto:元素內(nèi)容的height以及上、下外邊距。上、下內(nèi)邊距和邊框必須設(shè)置為特定的值,或者默認為0(如果沒有聲明border-style)。如果已經(jīng)設(shè)置了border-style,邊框的寬度會設(shè)置為值medium (這個值的定義并不明確)。圖7-15展示了如何記住元素框中的哪些部分可以有auto值,而哪些部分不可以。

圖7-15:可以設(shè)置為auto的垂直屬性

有意思的是,如果正常流中一個塊元素的margin-top或margin-bottom設(shè)置為auto,它會自動計算為0。遺憾的是,如果值為0,就不能很容易地將正常流元素在其包含塊中垂直居中。這也說明,網(wǎng)頁設(shè)計中如果將一個元素的上、下外邊距設(shè)置為auto,實際上它們都會重置為0,使元素框沒有外邊距。

注意:對于定位元素來說,上、下外邊距為auto時,其處理有所不同,有關(guān)的更多詳細內(nèi)容參見第10章。

height必須設(shè)置為auto或者是某種類型的非負值。

網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷咨詢專線:0871-63535511(點擊可一鍵撥號)