CSS盒模型

在Web開發中，CSS盒模型是指如何在瀏覽器引擎中對HTML元素進行建模，以及如何從CSS屬性導出HTML元素的尺寸。^[3]盒模型的指導方針由Web標準萬維網聯盟（W3C）特別是CSS工作組描述。在1990年代末和2000年代初的多數時間裏，主流瀏覽器中存在着不符合標準的盒模型實現。直到1998年CSS2的出現，引入了box-sizing屬性，這個問題基本上才得到了解決。

盒模型

CSS Box Model Module Level 3
CSS盒模型
原文名稱	CSS Box Model Module Level 3
狀態	W3C Candidate Recommendation Snapshot
最新版本	Level 3 2020年12月22日 (2020-12-22)[1]
組織	萬維網聯盟
委員會	CSS Working Group
編輯	Elika J. Etemad[1] Bert Bos[2] Anton Prowse[2]
基礎標準	CSS
領域	CSS
網站	www.w3.org/TR/css-box-3/

層疊樣式表

• CSS動畫
• CSS盒模型
• CSS濾器
• 無表格網頁設計
• 響應式網頁設計
• 維基教科書

本模板：

• 檢視
• 討論
• 編輯

規格

層疊樣式表（CSS）規範描述了圖形瀏覽器如何顯示網頁元素。 在CSS1規範中的第4節定義了「格式化模型「，它為塊級元素（例如p和blockquote ）提供了寬度和高度，以及圍繞它的三層框（填充、邊框和邊距）。 ^[4]雖然該規範從來沒有明確的使用術語「盒模型」，但是在那個時候該術語已經被很多的Web開發人員和Web瀏覽器供應商廣泛使用。

所有HTML元素都可以被視為「框」，其中包括div標籤、 p標籤或a標籤。每個盒子都有五個可修改的尺寸：

• height和width是指盒子實際內容的尺寸（文本、圖像……）
• padding是指該內容與框邊框之間的空間
• border是指是圍繞框的任何類型的線（實線、點線、虛線...）（如果存在
• margin是指是邊框周圍的空間

1996 年，W3C 成功發佈，之後在1999 年，對 CSS1 規範進行了修訂。當為任何塊級元素顯式特定的寬度或高度時，它只能確定可見元素的寬度或者高度、padding、border、以及隨後應用的邊距。 ^{[4] [5]}在 CSS3 發佈之前，這種盒模型被稱為W3C盒模型，之後它又被稱為content-box 。

框的總寬度可以被計算為為：left-margin + left-border + left-padding + width + right-padding + right-border + right-margin 。同樣，盒子的總高度可以被計算為：top-margin + top-border + top-padding + height + bottom-padding + bottom-border + bottom-margin

例如，下面的 CSS 代碼

.myClass {
  width: 200px;
  height: 100px;
  padding: 10px;
  border: solid 10px black;
  margin: 10px;
}

將指定屬於「myClass」的每個塊的盒子尺寸。此外，每個這樣的盒子的總高度為 160像素，寬度為 260 像素。

CSS3 將Internet Explorer 框模型引入了標準，稱為border-box 。 ^[6]

歷史

W3C 和 Internet Explorer盒模型之間解釋寬度的差異

在 HTML 4 和 CSS 之前，很少有 HTML 元素同時支持邊框和填充，這導致了對元素寬度和高度的定義沒有存在歧義。但是它因元素的不同而不同。表格的 HTML 寬度屬性定義了表格的寬度（包括其邊框）。 ^[7]另一方面，圖像的 HTML 寬度屬性定義了圖像本身（任何邊框內）的寬度。 ^[8]表格單元格是早期支持填充的唯一元素。單元格的寬度定義為「單元格內容的建議寬度（以像素為單位，不包括單元格填充）」。 ^[9]

1996 年，CSS ^[10]為更多元素引入了邊距、邊框和填充。它採用了與內容、邊框、邊距和填充相關的定義寬度，類似於表格單元格的寬度。 ^[11]此後這被稱為W3C盒模型。

之前很少有瀏覽器供應商真正實現了 W3C盒模型。兩大瀏覽器Netscape 4.0和Internet Explorer 4.0都將寬度和高度定義為一邊框到一邊框的距離。 ^[12]這被稱為traditional Exporer^[13]（也被稱為Internet Explorer盒模型）。 ^[14]

「怪異模式」下的Internet Explorer包括指定寬度或高度內的內容、內邊距和邊框；與標準行為相比，這會導致框的渲染更窄或更短。 ^[15]

因為早期版本的Internet Explorer處理盒模型或網頁中元素大小的方式與W3C推薦的級聯樣式的標準方式有着不同的表格語言，所以Internet Explorer盒模型行為被認為是一個錯誤。 ^{[16] [17]}從Internet Explorer 6開始，瀏覽器的支持替代呈現模式（也可以稱為「標準兼容模式」）可以解決此差異。但是出於向後兼容性的原因，所有版本默認情況下仍然可以以非標準方式運行（請參閱怪異模式）。 Mac 版 Internet Explorer不受此非標準行為的影響。

如果頁面包含某些HTML文檔類型聲明，則 Internet Explorer 版本6及更高版本不會受到該錯誤的影響。出於向後兼容性的原因，這些版本在怪異模式下保留了錯誤行為。 ^[18]例如，觸發怪異模式：

• 當文檔類型聲明不存在或不完整時；
• 當 HTML 遇到3或更早的文檔；
• 當 HTML 4.0 使用過渡或框架集文檔類型聲明，並且不存在系統標識符 (URI)；
• 當文檔類型聲明之前出現 SGML 註釋或其他無法識別的內容時
• IE瀏覽器 如果文檔類型聲明之前有XML聲明，則 6 還使用怪異模式。 ^[19]

人們設計了各種解決方法來實現 Internet Explorer 版本 5 及更早版本使用 W3C盒模型顯示網頁。這些解決方法通常利用 Internet Explorer 的 CSS 選擇器處理沒有關聯的錯誤，對瀏覽器隱藏某些規則。在這些變通辦法中，最著名的是由前 Microsoft 員工Tantek Çelik開發的「盒模型破解」，這個想法的產生是Tantek Çelik在為 Macintosh 開發 Internet Explorer 時提出。它涉及為 Windows 版 Internet Explorer 指定寬度聲明，然後使用 CSS 兼容瀏覽器的另一個寬度聲明覆蓋它。通過利用解析 CSS 規則的方式中的其他錯誤，對 Windows 版 Internet Explorer 隱藏。 Internet Explorer 的公開發布使這些 CSS「黑客」的實施變得更加複雜。不可否認的是，它修復了一些問題，但是仍有一些問題沒有被改善，這也將導致使用這些黑客攻擊的頁面出現錯誤的結果。 ^[18]

盒模型已經被黑客證明是不可靠的，因為它們依賴於瀏覽器 CSS 支持中的錯誤，即使這些錯誤可能會在以後的版本中修復。所以一些 Web 開發人員提出為了避免相同的元素同時指定寬度和填充，或者使用條件註釋或CSS 過濾器來解決舊版 Internet Explorer 中的框模型錯誤。 ^{[14] [20]}

支持Internet Explorer的盒模型

Web 設計師 Doug Bowman 提到：最初的 Internet Explorer盒模型代表了一種更好、更合乎邏輯的方法。 ^[21] Peter-Paul Koch 給出了一個物理盒子的例子，它的尺寸始終指的是盒子本身，包括潛在的填充，但是絕對不涉及到內容的填充。 ^[13]他說：」這種盒模型對於圖形設計師來說更有用，他們根據盒子的可見寬度而不是內容的寬度來創建設計。「 ^[22] Bernie Zimmermann 提到：」Internet Explorer盒模型更符合 HTML 表格模型中使用的單元格尺寸和填充的定義。「 ^[23]

W3C 在 CSS3 中包含了「box-sizing」屬性。當box-sizing: border-box;為元素指定後，所有的元素填充或邊框都會在指定的寬度和高度內繪製，「如傳統 HTML 用戶代理通常實現的那樣」。 ^[24] Internet Explorer 8 、 WebKit瀏覽器（例如Apple Safari 5.1+ 和Google Chrome） 、基於 Gecko 的瀏覽器（例如Mozilla Firefox 29.0 及更高版本、 Opera 7.0 及更高版本以及Konqueror 3.3.2 及更高版本）支持 CSS3 box-sizing 屬性。 29.0 之前的 Gecko 瀏覽器使用瀏覽器特定的-moz-box-sizing屬性支持相同的功能。 ^[25] border-box是Bootstrap框架中默認使用的盒模型。