盒子模型(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核心概念，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/60249.html
標籤：Html/Css