塊級元素的表現(xiàn)有時(shí)可以預(yù)測，有時(shí)則很讓人驚訝。例如，元素沿橫軸和豎軸擺放時(shí)，其處理就可能不同，為了充分了解如何處理塊級元素，必須對一些邊界和區(qū)域很清楚。

一般地，網(wǎng)頁設(shè)計(jì)中一個(gè)元素的width被定義為從左內(nèi)邊界到右內(nèi)邊界的距離，height則是從上內(nèi)邊界到下內(nèi)邊界的距離。這些屬性都可以應(yīng)用到元素。

不同的寬度、高度、內(nèi)邊距和外邊距相結(jié)合，就可以確定文檔的布局。在大多數(shù)情況下，文檔的高度和寬度由瀏覽器自動(dòng)確定，這要基于可用的顯示區(qū)域和其他一些因素。當(dāng)然在CSS網(wǎng)站制作中，可以更直接地控制元素的大小以及顯示方式。對于水平和垂直布局，可以選擇不同的效果，所以我們將分別介紹。

水平格式化

水平格式化往往比你想象得更復(fù)雜。其部分復(fù)雜性在于width影響的是內(nèi)容區(qū)的寬度，而不是整個(gè)可見的元素框?？紤]以下例子：

<p style="widch: 200px;">wideness?</p>

這行代碼使段落的內(nèi)容區(qū)寬度為200像素。如果為元素指定一個(gè)背景，就能很清楚地看出。不過，如果網(wǎng)頁設(shè)計(jì)中還指定了內(nèi)邊距、邊框或外邊距，這些都會(huì)增加到寬度值。假設(shè)指定如下：

<p style="width: 200px; padding: 10px; margin: 20px;">wideness?</p>

可見元素框的寬度現(xiàn)在是220像素，因?yàn)樵趦?nèi)容的左邊和右邊分別增加了10像素的內(nèi)邊距。外邊距則會(huì)在左右兩邊再延伸20像素，使整個(gè)元素框的寬度為260像素。

一定要知道這樣會(huì)隱式地增加width值，理解這一點(diǎn)很重要。大多數(shù)用戶認(rèn)為，width 是指可見元素框的寬度，如果為一個(gè)元素聲明了內(nèi)邊距、邊框以及寬度，他們指定的寬度值則是左外邊界到右外邊界的距離。但在CSS中并不是這樣。一定要牢牢記住這一點(diǎn)，以免以后糊涂。

注意：在寫作本書時(shí)，CSS的Box Model模塊提供了一些建議，提出了一些方法來允許創(chuàng)作人員決定width是指內(nèi)容寬度還是可見框?qū)挾取?/p>

對此有一個(gè)很簡單的規(guī)則，正常流中塊級元素框的水平部分總和就等于父元素的width。假設(shè)一個(gè)div中有兩個(gè)段落，這兩個(gè)段落的外邊距設(shè)置為1em。段落的內(nèi)容寬度（width 的值）再加上其左、右內(nèi)邊距，邊框或外邊距，加在一起正好是div內(nèi)容區(qū)的width,

假設(shè)div的width為30em，那么各段落內(nèi)容寬度、內(nèi)邊距，邊框或外邊距的總和就是30em。在圖7-3中，段落外的“空白”實(shí)際上是其外邊距。如果div有內(nèi)邊距，還會(huì)有更大的空白，不過這里div沒有內(nèi)邊距。稍后就會(huì)討論內(nèi)邊距。

水平屬性

網(wǎng)頁設(shè)計(jì)中水平格式化的“7大屬性”是：margin-left、border-left, padding-left、width、 padding-right、border-right和margin-right。這些屬性與塊級框的水平布局有關(guān)，如圖7-4所示。

這7個(gè)屬性的值加在一起必須是元素包含塊的寬度，這往往是塊元素的父元素的width 值（因?yàn)閴K級元素的父元素幾乎都是塊級元素。

圖7-3：元素框與其父元素的width相同

圖7-4：水平格式化的“7大屬性”

在這7個(gè)屬性中，只有3個(gè)屬性可以設(shè)置為auto:元素內(nèi)容的width，以及左、右外邊距。其余屬性必須設(shè)置為特定的值，或者默認(rèn)寬度為0，圖7-5顯示了框中的哪些部分可以取值為auto，而哪些部分不能。

圖7-5：可以設(shè)置為auto的水平屬性

width必須設(shè)置為auto或某種類型的非負(fù)值。如果在水平格式化中確實(shí)使用了auto，會(huì)得到不同的效果。

注意：CSS網(wǎng)站制作中允許瀏覽器為width設(shè)置一個(gè)最小值，塊級元素的width不能小于這個(gè)值，對于不同瀏覽器，這個(gè)最小值可能不同，因?yàn)樵谝?guī)范中對此沒有定義。