在 Web 開發中， CSS 盒子模型是指如何在瀏覽器引擎中對 HTML 元素進行建模和如何從 CSS 屬性匯出 HTML 元素的尺寸。 盒模型的指導方針由 Web 標準全球資訊網聯盟 W3C 特別是 CSS 工作組描述。在 20 世紀 90 年代末和 2000 年代初的多數時間裡，主流瀏覽器中存在著不符合標準的盒模型的實現。直到 1998 年 CSS2 的出現，引入了 boxsizing 屬性，這個問題基本上才得到瞭解決。 規格 層疊樣式表 CSS 規範描述了圖形瀏覽器如何顯示網頁元素。 在 CSS1 規範中的第 4 節定義了 格式化模型 ，它為塊級元素（例如 p 和 blockquote ）提供了寬度和高度，以及圍繞它的三層框（填充、邊框和邊距）。 雖然該規範從來沒有明確的使用術語 盒模型，但是在那個時候該術語已經被很多的 Web 開發人員和 Web 瀏覽器供應商廣泛使用。 所有 HTML 元素都可以被視為 框，其中包括 div 標籤、 p 標籤或 a 標籤。每個盒子都有五個可修改的尺寸： height 和 width 是指盒子實際內容的尺寸（文字、影像） padding 是指該內容與框邊框之間的空間 border 是指是圍繞框的任何型別的線（實線、點線、虛線）（如果存在 margin 是指是邊框周圍的空間 1996 年，W3C 成功釋出，之後在 1999 年，對 CSS1 規範進行了修訂。當為任何塊級元素顯式特定的寬度或高度時，它只能確定可見元素的寬度或者高度、padding、border、以及隨後應用的邊距。 在 CSS3 釋出之前，這種盒模型被稱為 W3C 盒模型，之後它又被稱為 contentbox 。 框的總寬度可以被計算為為：leftmargin leftborder leftpadding width rightpadding rightborder rightmargin 。同樣，盒子的總高度可以被計算為：topmargin topborder toppadding height bottompadding bottomborder bottommargin 例如，下面的 CSS 程式碼 myClass width 200px height 100px padding 10px border solid 10px black margin 10px 將指定屬於 myClass 的每個塊的盒子尺寸。此外，每個這樣的盒子的總高度為 160 畫素，寬度為 260 畫素。 CSS3 將 Internet Explorer 框模型引入了標準，稱為 borderbox 。 歷史 在 HTML 4 和 CSS 之前，很少有 HTML 元素同時支援邊框和填充，這導致了對元素寬度和高度的定義沒有存在歧義。但是它因元素的不同而不同。表格的 HTML 寬度屬性定義了表格的寬度（包括其邊框）。 另一方面，影像的 HTML 寬度屬性定義了影像本身（任何邊框內）的寬度。 表格單元格是早期支援填充的唯一元素。單元格的寬度定義為 單元格內容的建議寬度（以畫素為單位，不包括單元格填充）。 1996 年，CSS 為更多元素引入了邊距、邊框和填充。它採用了與內容、邊框、邊距和填充相關的定義寬度，類似於表格單元格的寬度。 此後這被稱為 W3C 盒子模型。 之前很少有瀏覽器供應商真正實現了 W3C 盒子模型。兩大瀏覽器 Netscape 40 和 Internet Explorer 40 都將寬度和高度定義為一邊框到一邊框的距離。 這被稱為 traditional Exporer（也被稱為 Internet Explorer 盒模型）。 怪異模式 下的 Internet Explorer 包括指定寬度或高度內的內容、內邊距和邊框；與標準行為相比，這會導致框的渲染更窄或更短。 因為早期版本的 Internet Explorer 處理盒模型或網頁中元素大小的方式與 W3C 推薦的級聯樣式的標準方式有著不同的表格語言，所以 Internet Explorer 盒模型行為被認為是一個錯誤。 從 Internet Explorer 6 開始，瀏覽器的支援替代呈現模式（也可以稱為 標準相容模式）可以解決此差異。但是出於向後相容性的原因，所有版本預設情況下仍然可以以非標準方式執行（請參閱怪異模式）。 Mac 版 Internet Explorer 不受此非標準行為的影響。 如果頁面包含某些 HTML 文件型別宣告，則 Internet Explorer 版本 6 及更高版本不會受到該錯誤的影響。出於向後相容性的原因，這些版本在怪異模式下保留了錯誤行為。 例如，觸發怪異模式： 當文件型別宣告不存在或不完整時； 當 HTML 遇到 3 或更早的文件； 當 HTML 40 使用過渡或框架集文件型別宣告，並且不存在系統識別符號 URI； 當文件型別宣告之前出現 SGML 註釋或其他無法識別的內容時 IE 瀏覽器 如果文件型別宣告之前有 XML 宣告，則 6 還使用怪異模式。 人們設計了各種解決方法來實現 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 駭客 的實施變得更加複雜。不可否認的是，它修復了一些問題，但是仍有一些問題沒有被改善，這也將導致使用這些駭客攻擊的頁面出現錯誤的結果。 盒子模型已經被駭客證明是不可靠的，因為它們依賴於瀏覽器 CSS 支援中的錯誤，即使這些錯誤可能會在以後的版本中修復。所以一些 Web 開發人員提出為了避免相同的元素同時指定寬度和填充，或者使用條件註釋或 CSS 過濾器來解決舊版 Internet Explorer 中的框模型錯誤。 支援 Internet Explorer 的盒子模型 Web 設計師 Doug Bowman 提到：最初的 Internet Explorer 盒子模型代表了一種更好、更合乎邏輯的方法。 PeterPaul Koch 給出了一個物理盒子的例子，它的尺寸始終指的是盒子本身，包括潛在的填充，但是絕對不涉及到內容的填充。 他說： 這種盒子模型對於圖形設計師來說更有用，他們根據盒子的可見寬度而不是內容的寬度來建立設計。Bernie Zimmermann 提到：Internet Explorer 盒模型更符合 HTML 表格模型中使用的單元格尺寸和填充的定義。W3C 在 CSS3 中包含了 boxsizing 屬性。當 boxsizing borderbox 為元素指定後，所有的元素填充或邊框都會在指定的寬度和高度內繪製，如傳統 HTML 使用者代理通常實現的那樣。 Internet Explorer 8 、 WebKit 瀏覽器（例如 Apple Safari 51 和 Google Chrome） 、基於 Gecko 的瀏覽器（例如 Mozilla Firefox 290 及更高版本、 Opera 70 及更高版本以及 Konqueror 332 及更高版本）支援 CSS3 boxsizing 屬性。 290 之前的 Gecko 瀏覽器使用瀏覽器特定的 mozboxsizing 屬性支援相同的功能。 borderbox 是 Bootstrap 框架中預設使用的盒子模型。 參考 外部連結 全球資訊網聯盟 W3C 盒模型規範 CSS 盒模型教程 Tantek Çelik 對 盒子模型破解 的描述 Internet Explorer 7 中的級聯樣式表相容性 MSDN 文章，2006 年 7 月。 Firefox 和 Internet Explorer 中的 CSS 框模型差異 Mozilla Firefox 和 Internet Explorer 之間的渲染差異的進一步說明。 Category 層疊樣式表 CategoryCSS 框架 Category 網站開發