盒子模型(Box Model)
關于更多CSS核心概念的文章請關注GitHub——CSS核心概念。
當對一個文檔進行布局的時候，浏覽器的渲染引擎會根據标準之一的 CSS 基礎框盒模型（CSS basic box model），将所有元素表示為一個個矩形的盒子。所有 HTML 元素可以看作盒子，在 CSS 中，Box Model 這一術語是用來設計和布局時使用。
CSS 盒模型本質上是一個盒子，封裝周圍的 HTML 元素，每個盒子由四個部分（或稱區域）組成：内容（Content），内邊距（Padding），邊框（Border），外邊框（Margin）。盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。
下面的圖檔說明了盒子模型（Box Model）：
CSS 盒模型不同組成部分的說明：
- Content（内容） - 由内容邊界限制，容納着元素的“真實”内容，例如文本、圖像，或是一個視訊播放器。
- Padding（内邊距） - 由内邊距邊界限制，擴充自内容區域，負責延伸内容區域的背景，填充元素中内容與邊框的間距。當其取值為百分比時，該百分比都是相對于包含該元素的塊的寬度（相對于該塊的百分比）。
- Border（邊框） - 由邊框邊界限制，擴充自内邊距區域，是容納邊框的區域。即圍繞在内邊距和内容外的邊框。
- Margin（外邊距） - 由外邊距邊界限制，用空白區域擴充邊框區域，以分開相鄰的元素。當其取值為百分比時，該百分比都是相對于包含該元素的塊的寬度（相對于該塊的百分比）。
标準盒模型與怪異盒模型
盒子模型分為兩種：第一種是 W3C 标準的盒子模型（标準盒模型） 、第二種 IE 标準的盒子模型（怪異盒模型）。
目前大部分的浏覽器支援的是 W3C 的标準盒模型，也保留了對怪異盒模型的支援，當然 IE 浏覽器沿用的是怪異盒模型。怪異模式是“部分浏覽器在支援 W3C 标準的同時還保留了原來的解析模式”，怪異模式主要表現在 IE 核心的浏覽器。
标準盒模型與怪異盒模型的表現效果的差別：
- 标準盒模型中 width 指的是内容（Content）區域的寬度；height 指的是内容（Content）區域的高度。标準盒模型下盒子的大小 = width + Border + Padding + Margin。
- 怪異盒模型中的 width 指的是内容（Content）、邊框（Border）、内邊距（Padding）總和的寬度，即 width = Content + Border + Padding；height 指的是内容（Content）、邊框（Border）、内邊距（Padding）總和的高度。怪異盒模型下盒子的大小 =width + Margin
注意：W3C 的标準盒模型和IE 怪異盒模型主要差別是：盒模型中的 width 是否包含 border 和 padding。W3C 的标準盒模型的 width 不包含 border 和 padding，而IE 怪異盒模型的 width 中包含 border 和 padding。
浏覽器如何解析盒模型
如果是定義了完整的 doctype 的标準文檔類型，無論是哪種模型情況，最終都會觸發标準模式，如果 doctype 協定缺失，會由浏覽器自己界定，在 IE 浏覽器中 IE9 以下（IE6、IE7、IE8）的版本觸發怪異模式，其他浏覽器中會預設為 W3C标準模式。
設定盒模型解析模式
我們還可以通過設定 HTML 元素的 box-sizing 來設定盒子模型的解析模式
box-sizing 的屬性值：
- content-box： 預設值，border 和padding 不算到 width 範圍内，可以了解為是 W3C 的标準模型
- border-box：border 和 padding 劃歸到 width 範圍内，可以了解為是 IE 的怪異盒模型
- padding-box：将 padding 算入 width 範圍
當設定為 box-sizing: content-box 時，将采用标準模式解析計算（預設模式），當設定為 box-sizing: border-box 時，将采用怪異模式解析計算。如：
<!-- 将 div 設定為怪異盒模型解析模式 -->
<div style="box-sizing: border-box;"></div> 複制
關于更多CSS核心概念的文章請關注GitHub——CSS核心概念。