寫了這個標題之後，凝望了很久，不知道怎麼開筆，因為這個名字起的優點丟人，讓我不知道從何說起，作為一個前端開發，盒子模型這邊基礎的內容居然還記不住，就有點說不過去了，說到底就是基礎薄弱，所以深刻反省之後，覺得得腳踏實地地一步一步把基礎好好補一補。
囉嗦完了，正文開始
css盒子模型是在編寫css佈局時的一種思維模式，它擁有外邊距margin、邊框border、內邊距padding、內容content四個屬性。
一般編寫佈局和樣式程式碼時，都會涉及到寬高的設定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
</head>
<body>
<div class='box'></div>
</body>
</html>
複製程式碼body{
padding:0;
margin:0
}
.box{
height: 100px;
width: 100px;
border: 5px solid blue;
box-sizing: border-box;
background-color: yellow
}
複製程式碼
上面是設定了一個長100px，寬100px的div盒子，由於太貼近邊框，給div新增一個外邊距margin，使它可以與邊框保持一定的距離。外邊距margin是針對盒子的四個邊的，如果沒有特定指向的話，都是同時設定四個邊框。看下圖
margin: 20px
複製程式碼
給盒子content新增內容，然後給個內邊距
.box{
...
padding: 20px
}
複製程式碼
設定了padding之後，會發現box的大小並沒有變，而是內容框content大小發生了變化，這種形式稱之為 IE標準盒子模型，width = content + padding + border，當設定了一個盒子的寬高之後，再為它設定border和padding，盒子的寬高也不會發生變化，而是會以擠壓盒子裡面的空間。
OK，到這裡，有的朋友可能會說，那如果我想不擠壓盒子的大小，又想有border和padding的大小在，那怎麼處理？CSS3提供了可以切換盒子模型模式的屬性：box-sizing，它有2個值，分別是content-box和border-box，如果要實現上面這個需求，則需要給box設定box-sizing: content-box，新增之後，如下圖
body{
padding:0;
margin:0
}
.box{
height: 100px;
width: 100px;
border: 5px solid blue;
box-sizing: border-box;
background-color: yellow;
margin: 20px;
padding: 20px;
box-sizing: content-box
}
複製程式碼
看到box的大小變大了，這是因為box-sizing: content-box把盒子從IE標準盒子模型轉換成了W3C標準模型，W3C標準模型中對盒子的寬高和外邊距margin、邊框border、內邊距padding、內容content四者之間的關係是 width = context，所以，即使最先給box設定了height:100px;width: 100px;，後續再新增margin、border、padding，content的大小還是最先設定的，並不會改變，那margin、border、padding的值則會再content的外面延伸。
多個盒子模型相互都設定了margin，會出現margin塌陷的問題，常見的有2種
在上面程式碼後面追加一個盒子，並設定margin-top:50px，理想box和box2之間的間距應該是20px+50px=70px，但是，並沒有，他們之間只出現了50px
.box2{
height: 100px;
width: 100px;
background-color: yellowgreen;
margin-top:50px
}
複製程式碼
這是一種margin塌陷的情況，還有一種是巢狀的情況
<div class='box3'>
<div class='box4'></div>
</div>
複製程式碼.box3{
height:200px;
width:200px;
background-color: gray
}
.box4{
height: 100px;
width: 100px;
background-color: yellowgreen;
margin-top:50px
}
複製程式碼
給box4設定margin-top值之後，居然作用到了box3中，這不是我們想要的，解決方法也有挺多的
- 為父盒子設定
border:1px solid #gray，同時height:198px;width:198px; - 為父盒子新增
overflow：hidden； - 為父盒子設定
padding-top:50px值。
總結
- 寬度的計算 IE標準：
width = context+padding+border；w3c標準：width=context CSS3屬性box-sizing可以切換盒子模型的模式