CSS盒子模型(Box Model)
所有HTML元素可以看作盒子，在CSS中，"box model"這一術語是用來設計和布局時使用。
CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。
盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。
下圖為盒子模型圖：
- margin(外邊距) - 清除邊框外的區域，外邊距是透明的。
- border(邊框) - 圍繞在內邊距和內容外的邊框。
- padding(內邊距) - 清除內容周圍的區域，內邊距是透明的。
- content(內容) - 盒子的內容，顯示文本和圖像。
盒子模型分為兩種：一種為標准盒子模型（W3C標准），另一種為怪異盒子模型（IE標准）
一、標准盒子模型
標准盒子模型的總寬、高度計算公式為：
總寬度 = 寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
總高度 = 高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距
在瀏覽器中默認選擇的就是標准盒模型
二、怪異盒子模型
怪異盒子模型的總寬、高計算是與標准盒模型不同的：
總寬度 = 寬度（內容+邊框+左右填充）+左右邊距
與標准盒不同的是，怪異盒中的寬度不是只有盒子內容的寬度，而是盒子內容的寬度加上左右邊框再加上左右填充，這是怪異盒模的標准寬度
盒模型解析
編輯器建一個html頁面的時候，其實最頂上都會有一個DOCTYPE標簽，如果定義了DOCTYPE，就會觸發標准盒模式，使用W3C的標准。但是在IE9以下，DOCTYPE協議缺失，那么瀏覽器就會自己界定觸發怪異模式
定義盒模型 屬性 ：box-sizing
box-sizing屬性的三個值 ：
-
content-box： 默認值，border和padding不算到width范圍內，采用標准模式解析計算，是W3c的標准模型(default)
-
border-box：border和padding划歸到width范圍內，采用怪異模式解析計算，是IE的怪異盒模型
-
padding-box：將padding算入width范圍
box-sizing使用需要加前綴：
- webkit-box-sizing: content-box;
- moz-box-sizing: content-box;