什麼是盒子模型
CSS 盒子模型（Box Modle）可以用來對元素進行佈局，包括內邊距（padding），邊框（border），外邊距（margin），和實際內容（content）這幾個部分。
Margin(外邊距) - 清除邊框外的區域，外邊距是透明的。
Border(邊框) - 圍繞在內邊距和內容外的邊框。
Padding(內邊距) - 清除內容周圍的區域，內邊距是透明的。
Content(內容) - 盒子的內容，顯示文本和圖像
盒子模型的類型以及區別
盒子模型分爲兩種 第一種是W3c標準的盒子模型（標準盒模型） 、第二種IE標準的盒子模型（怪異盒模型）
當前大部分的瀏覽器支持的是W3c的標準盒模型，也保留了對怪異盒模型的支持，當然IE瀏覽器沿用的是怪異盒模型。怪異模式是“部分瀏覽器在支持W3C標準的同時還保留了原來的解析模式”，怪異模式主要表現在IE內核的瀏覽器。
區別在於IE盒模型border、padding都包含在width裏面
標準盒子模型：content + border + padding + margin；
IE盒子模型：width(content+border+padding)+margin;
看下面這個例子：
顯示效果：
附上源碼，兩種盒模型做了對比
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
font-size: 16px;
color: #ffffff;
text-align: center;
}
/* 顯示盒模型 */
/* 標準盒模型計算規則
元素框的總寬度 = 元素（element）的width + padding的左邊距和右邊距的值 + margin的左邊距和右邊距的值 + border的左右寬度；
元素框的總高度 = 元素（element）的height + padding的上下邊距的值 + margin的上下邊距的值 ＋ border的上下寬度。
元素的總寬度 = 元素（element）的width + padding的左邊距和右邊距的值 + border的左右寬度；
元素的總高度 = 元素（element）的height + padding的上下邊距的值 ＋ border的上下寬度。
*/
.box {
/* 高度和寬度 */
height: 200px;
width: 200px;
background-color: pink;
/* 邊框的寬度 */
border: 10px solid blue;
/* 內邊距 */
padding: 10px;
/* 外邊距*/
margin: 100px;
}
/* 此處引入子div只是爲了顯示content的區域 */
.child {
height: 100%;
width: 100%;
background-color: crimson;
}
.ie_box {
/* 高度和寬度 */
height: 200px;
width: 200px;
background-color: pink;
/* 邊框的寬度 */
border: 10px solid blue;
/* 內邊距 */
padding: 10px;
/* 外邊距*/
margin: 100px;
/* 改爲ie盒模型（怪異盒子模型） */
box-sizing: border-box;
}
/* 此處引入子div只是爲了顯示content的區域 */
.ie_child {
height: 100%;
width: 100%;
background-color: crimson;
}
</style>
</head>
<body>
<div class="box">
<div class="child">
我是標準盒模型啊<br><br>
height: 200px;<br>
width: 200px;<br>
左右padding:10px，border:10px，實際寬度240px
</div>
</div>
<div class="ie_box">
<div class="ie_child">
我是IE盒模型啊<br><br>
height: 200px;<br>
width: 200px;<br>
左右padding:10px，border:10px，實際寬度200px
</div>
</div>
</body>
</html>
盒模型的選擇
如果是定義了完整的doctype的標準文檔類型，無論是哪種模型情況，最終都會觸發標準模式，
如果doctype協議缺失，會由瀏覽器自己界定，在IE瀏覽器中IE9以下（IE6.IE7.IE8）的版本觸發怪異模式，其他瀏覽器中會默認爲W3c標準模式。
css可以通過設置box-sizing來改變
box-sizing:border-box; IE盒模型
box-sizing:content-box;標準盒模型
這個在float的時候經常這樣設置，防止因邊框和padding加入引起的寬度撐大等問題