作者按：又翻出來一篇5年前（2006年12月28日）寫的關于盒模型的文章，都不知道參考了哪本書了。只能憑印象感謝 Eric Meyer 的《CSS權威指南（第2版）》（The Definitive Guide, 2nd Edition）——因為當時作為練習剛翻譯完這本書。

內(nèi)容提要 透徹掌握CSS可視化模型的原理，可以讓我們準確判斷某個意外行為到底是因為CSS樣式問題，還是CSS解析引擎問題。本文要討論的要點是，當margin-left、width和margin-right這三個屬性分別取auto值或大于0的值，進而形成不同組合的情況下，如何確定塊級元素中各個組成部分的寬度。

塊級元素和行內(nèi)元素

CSS把處在正常文檔流中的不同html元素區(qū)分為塊級元素（block element）和行內(nèi)元素（inline element）。一般來說，所謂塊級元素就是指當它們顯示在瀏覽器中時，會在自身前后各插入一個空行，而使自身在頁面中占據(jù)一個相對獨立的塊狀區(qū)域的元素。因此，HTML文檔中連續(xù)的塊級元素的典型顯示方式就是“堆疊”。塊級元素的例子有h1到h6、div、p等。而行內(nèi)元素則是指以自身所包含的內(nèi)容決定在頁面中占據(jù)空間的大小，并且可以與其他行內(nèi)元素共處一行的元素。行內(nèi)元素的典型顯示方式就是“連接”。行內(nèi)元素的例子有a、img、span、input等。對于行內(nèi)元素，又可以進一步分為可替換行內(nèi)元素和不可替換行內(nèi)元素，兩者的區(qū)別在于元素中所包含的內(nèi)容是否直接顯示在頁面中。不可替換的行內(nèi)元素，如a元素中的鏈接文本會直接顯示在網(wǎng)頁中；而可替換的行內(nèi)元素，如img，當它在網(wǎng)頁中顯示時會被其src屬性指向的圖像替代。本文討論的是塊級元素，有關行內(nèi)元素的更多內(nèi)容請參考其他資料。

正常文檔流 指的是HTML文檔元素在進行內(nèi)容布局時所遵循的從左到右、從上到下的表現(xiàn)方式。這種文檔流布局的方式對于某些語言可能會有所不同（比如從右往左閱讀的語言）。HTML中的大多數(shù)元素都處在正常的文檔流中，而一個元素要脫離正常流的唯一途徑就是浮動或定位。

塊級元素的寬度

塊級元素的寬度是指塊級元素內(nèi)容區(qū)、左右內(nèi)邊距、左右邊框和左右外邊距的寬度之和。而塊級元素內(nèi)容區(qū)的寬度由該元素的width屬性來表示（或設置）。

圖1簡單的盒模型示意圖

有一個簡單的規(guī)則，就是塊級元素的寬度總是等于其父元素內(nèi)容區(qū)的寬度。如果一個div元素的父元素是body，那么這個div元素的寬度就等于body的寬度，也就是瀏覽器中窗口的寬度。一個處在正常文檔流中的塊級元素，其寬度是由七個部分共同決定的。可以稱為塊級元素的水平“七屬性”，它們分別是：

• margin-left
• border-left
• padding-left
• width
• padding-right
• border-right
• margin-right

圖2 塊級元素的水平“七屬性”

如圖2所示，塊級元素在水平方向上的寬度是由七個CSS屬性共同決定的。例如，一個div元素中包含一個p元素。而div元素的寬度是500px，那么這個p元素內(nèi)容區(qū)的寬度（width）加上其左右內(nèi)邊距、左右邊框和左右外邊距之和就等于500px。這個計算過程用公式表示，就是：

margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 500px

自動水平屬性如何決定塊級元素的寬度

在塊級元素的水平七屬性中，只有三個屬性可以使用auto（自動）值，如圖3所示。

圖3 可以取auto值的水平屬性

也就是說，只有margin-left、width和margin-right這三個屬性可以使用auto值。這正是本文要討論的核心問題，即在上述三個屬性分別取不同的auto值和長度值，形成不同組合的情況下，相應塊級元素盒子中各部分的寬度是如何確定的？

在掌握了各種組合的可能性和相應結果的基礎上，我們就可以在遇到意外的情況時，對到底是CSS樣式的問題，還是CSS解析引擎的問題作出正確的判斷。并根據(jù)判斷來決定是修改CSS樣式、向瀏覽器提供商報告bug，還是采取過濾或hack手段來解決問題。

現(xiàn)在舉例子說明，假設有如下簡單的html代碼：

<div><p> </p> </div>

而相應有8種可能的CSS規(guī)則：

1. p { margin-left:auto;width:auto;margin-right:auto; } 2. p { margin-left:50px;width:auto;margin-right:auto; } 3. p { margin-left:auto;width:auto;margin-right:50px; } 4. p { margin-left:50px;width:auto;margin-right:50px; } 5. p { margin-left:auto;width:200px;margin-right:auto; } 6. p { margin-left:50px;width:200px;margin-right:auto; } 7. p { margin-left:auto;width:200px;margin-right:50px; } 8. p { margin-left:50px;width:200px;margin-right:50px; }

將這8種可能的CSS規(guī)則應用到上面的標記以后，會得到如圖3所示的結果（圖中為父元素div添加了邊框，而為了表示內(nèi)容區(qū)的寬度，也為p元素添加了背景）。

圖4 自動寬度的8種可能性

下面，我們就來逐一分析這8種情況：

第一種情況：

規(guī)則是 p { margin-left:auto;width:auto;margin-right:auto; }

即，三個屬性全都取auto值。如圖3所示，結果是p元素的內(nèi)容區(qū)的寬度和父元素div的寬度相等。根據(jù)前面的公式（此例未考慮左右邊框和內(nèi)邊距，假設它們?nèi)∧J值0）我們知道，此時的margin-left:auto和margin-right:auto等同于margin-left:0和margin-right:0。或者說此時的左右外邊距都等于0。

第二種情況：

規(guī)則是 p { margin-left:50px;width:auto;margin-right:auto; }

即，把左外邊距明確設置為50像素，width和margin-right的值仍然是auto。如圖3所示，結果是p元素的內(nèi)容區(qū)寬度等于div元素的寬度減去50像素。也就是說，此時左外邊距是50像素，而margin-right:auto相當于margin-right:0，即右外邊距為0。

第三種情況：

規(guī)則是 p { margin-left:auto;width:auto;margin-right:50px; }

與第二種情況類似，只不過是把右外邊距而不是左外邊距明確設置為50像素。圖3所示的結果告訴我們，此時右外邊距是50像素，而左外邊距為0。（以上三種情況，值為auto的外邊距都被重置為默認值0）

第四種情況：

規(guī)則是 p { margin-left:50px;width:auto;margin-right:50px; }

這次是把左、右外邊距都明確地設置為50像素，而只有width屬性是auto。如圖3所示，結果是p元素內(nèi)容區(qū)的寬度等于div的寬度減去（50+50=）100像素。也就是說，50像素的左、右外邊距是有效的。p元素內(nèi)容區(qū)在左右外邊距之間以自動適應的寬度值補足了div元素的寬度。

第五種情況：

規(guī)則是 p { margin-left:auto;width:200px;margin-right:auto; }

這次把左、右外邊距都設置為auto，而把width明確地設置為200像素。如圖3所示，結果是p元素的內(nèi)容區(qū)寬度就是設置的200像素，而且，由于左右外邊距同為auto，使得p元素在div元素中水平居中。這種情況也是網(wǎng)頁布局中最常用的居中塊級元素居的主要手段。

第六種情況：

規(guī)則是 p { margin-left:50px;width:200px;margin-right:auto; }

這次margin-left和width分別明確設置成了50px和200px，只有右外邊距的值是auto。從圖3中可以看到，結果是p元素的內(nèi)容區(qū)就是設置的200像素，而左外邊距也是設置的50像素。但右外邊距此時在前兩個部分之后以自動適應的寬度值補足了div元素的寬度。

第七種情況：

規(guī)則是 p { margin-left:auto;width:200px;margin-right:50px; }

與第六種情況相似，但這次是左外邊距在后兩個部分之前以自動適應的寬度值補足了div元素的寬度。

第八種情況：

規(guī)則是 p { margin-left:50px;width:200px;margin-right:50px; }

這是一種典型的情況，即三個屬性都明確地設置相應的值。從圖3的結果中我們看到，只有左外邊距和p元素內(nèi)容區(qū)的寬度是設置的值。右外邊距雖然也明確設置了50像素的值，但實際情況就像是使用了auto的第六種情況一樣。實際上，在三個屬性都明確設置了值，但其中一個值在沒有解的情況下－－即在不能滿足三者之和等于div元素寬度的情況下－－在從左往右閱讀的語言中，會把右外邊距重置為自動適應的寬度值，也就是auto。

小結

通過對以上8種可能情況的逐一分析，我們可以得出如下結論：

在width屬性的值設置成auto的情況下，塊級元素內(nèi)容區(qū)的寬度取決于左右外邊距是否明確設置了值。如果左右外邊距值都是auto，則左右外邊距的值都會被重置為默認的值0；如果左右外邊距中只有一個值是auto，則該值被重置為0，另一個值有效；如果左右外邊距都設置了明確的值，兩個值都將有效，此時元素內(nèi)容區(qū)的寬度就是父元素的寬度減去左右外邊距后的值。需要說明的是，左右外邊距的默認值是0，這意味著如果沒有在CSS規(guī)則中聲明margin-left或者margin-right，它們就會使用默認值0。

在width屬性的值設置為大于0的值的情況下，塊級元素內(nèi)容區(qū)的寬度就是由width屬性設置的值。此時，左右外邊距的值如果都是auto，則會使塊級元素在其父元素中居中；如果左右外邊距中只有一個值是auto，則明確設置的值有效，auto值會自動適應剩余的寬度；如果左右外邊距都設置了明確的值，那么在從左往右閱讀的語言中，會把右外邊距的值重置為auto。

（注：本文所說“設置明確的值”，是指設置了大于0的值）

以下是今天（2012年1月17日）在Chrome中做的一個測試的截圖。

總結

以上是生活随笔為你收集整理的透彻理解块级元素的宽度的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。