盒子模型(Box Model)

關(guān)于更多CSS核心概念的文章請關(guān)注GitHub——CSS核心概念。

當(dāng)對一個文檔進行布局的時候，瀏覽器的渲染引擎會根據(jù)標(biāo)準(zhǔn)之一的 CSS 基礎(chǔ)框盒模型（CSS basic box model），將所有元素表示為一個個矩形的盒子。所有 HTML 元素可以看作盒子，在 CSS 中，Box Model 這一術(shù)語是用來設(shè)計和布局時使用。

CSS 盒模型本質(zhì)上是一個盒子，封裝周圍的 HTML 元素，每個盒子由四個部分（或稱區(qū)域）組成：內(nèi)容（Content），內(nèi)邊距（Padding），邊框（Border），外邊框（Margin）。盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。

下面的圖片說明了盒子模型（Box Model）：

CSS 盒模型不同組成部分的說明：

• Content（內(nèi)容） - 由內(nèi)容邊界限制，容納著元素的“真實”內(nèi)容，例如文本、圖像，或是一個視頻播放器。
• Padding（內(nèi)邊距） - 由內(nèi)邊距邊界限制，擴展自內(nèi)容區(qū)域，負(fù)責(zé)延伸內(nèi)容區(qū)域的背景，填充元素中內(nèi)容與邊框的間距。當(dāng)其取值為百分比時，該百分比都是相對于包含該元素的塊的寬度（相對于該塊的百分比）。
• Border（邊框） - 由邊框邊界限制，擴展自內(nèi)邊距區(qū)域，是容納邊框的區(qū)域。即圍繞在內(nèi)邊距和內(nèi)容外的邊框。
• Margin（外邊距） - 由外邊距邊界限制，用空白區(qū)域擴展邊框區(qū)域，以分開相鄰的元素。當(dāng)其取值為百分比時，該百分比都是相對于包含該元素的塊的寬度（相對于該塊的百分比）。

標(biāo)準(zhǔn)盒模型與怪異盒模型

盒子模型分為兩種：第一種是 W3C 標(biāo)準(zhǔn)的盒子模型（標(biāo)準(zhǔn)盒模型） 、第二種 IE 標(biāo)準(zhǔn)的盒子模型（怪異盒模型）。

當(dāng)前大部分的瀏覽器支持的是 W3C 的標(biāo)準(zhǔn)盒模型，也保留了對怪異盒模型的支持，當(dāng)然 IE 瀏覽器沿用的是怪異盒模型。怪異模式是“部分瀏覽器在支持 W3C 標(biāo)準(zhǔn)的同時還保留了原來的解析模式”，怪異模式主要表現(xiàn)在 IE 內(nèi)核的瀏覽器。

標(biāo)準(zhǔn)盒模型與怪異盒模型的表現(xiàn)效果的區(qū)別：

• 標(biāo)準(zhǔn)盒模型中 width 指的是內(nèi)容（Content）區(qū)域的寬度；height 指的是內(nèi)容（Content）區(qū)域的高度。標(biāo)準(zhǔn)盒模型下盒子的大小 = width + Border + Padding + Margin。
• 怪異盒模型中的 width 指的是內(nèi)容（Content）、邊框（Border）、內(nèi)邊距（Padding）總和的寬度，即 width = Content + Border + Padding；height 指的是內(nèi)容（Content）、邊框（Border）、內(nèi)邊距（Padding）總和的高度。怪異盒模型下盒子的大小 =width + Margin

注意：W3C 的標(biāo)準(zhǔn)盒模型和IE 怪異盒模型主要區(qū)別是：盒模型中的 width 是否包含 border 和 padding。W3C 的標(biāo)準(zhǔn)盒模型的 width 不包含 border 和 padding，而IE 怪異盒模型的 width 中包含 border 和 padding。

瀏覽器如何解析盒模型

如果是定義了完整的 doctype 的標(biāo)準(zhǔn)文檔類型，無論是哪種模型情況，最終都會觸發(fā)標(biāo)準(zhǔn)模式，如果 doctype 協(xié)議缺失，會由瀏覽器自己界定，在 IE 瀏覽器中 IE9 以下（IE6、IE7、IE8）的版本觸發(fā)怪異模式，其他瀏覽器中會默認(rèn)為 W3C標(biāo)準(zhǔn)模式。

設(shè)置盒模型解析模式

我們還可以通過設(shè)置 HTML 元素的 box-sizing 來設(shè)置盒子模型的解析模式

box-sizing 的屬性值：

• content-box： 默認(rèn)值，border 和padding 不算到 width 范圍內(nèi)，可以理解為是 W3C 的標(biāo)準(zhǔn)模型
• border-box：border 和 padding 劃歸到 width 范圍內(nèi)，可以理解為是 IE 的怪異盒模型
• padding-box：將 padding 算入 width 范圍

當(dāng)設(shè)置為 box-sizing: content-box 時，將采用標(biāo)準(zhǔn)模式解析計算（默認(rèn)模式），當(dāng)設(shè)置為 box-sizing: border-box 時，將采用怪異模式解析計算。如：

<!-- 將 div 設(shè)置為怪異盒模型解析模式 -->
<div style="box-sizing: border-box;"></div>

關(guān)于更多CSS核心概念的文章請關(guān)注GitHub——CSS核心概念。