什麼是盒模型（標準盒模型，怪異盒模型）

盒模型：（內容（content）,內邊距（padding）,邊框（border）,外邊距（margin））

CSS中的盒子模型分爲兩種：

W3C標準盒模型和IE怪異盒模型。

標準盒模型下：

一個塊的寬度 = width+padding(左右內邊距)+border(左右邊框)+margin(左右外邊距)；

怪異盒模型下：

一個塊的寬度 = width + margin(左右)（即width已經包含了padding和border值）

CSS3的box-sizing：

box-sizing語法：
box-sizing: content-box || border-box || inherit || initial

當設置爲box-sizing:content-box時，將採用標準模式解析計算，也是默認模式；
當設置爲box-sizing:border-box時，將採用怪異模式解析計算；

個人理解：

用box-sizing:border-box;寫移動端的代碼有一個好處 ！
一般情況下用百分比佈局，
如果用正常的標準盒模型寫的話，給元素添加一個1px邊框的邊框，元素的寬度是百分百的話，那麼這個元素就超出屏幕的寬度，
如果用box-sizing:border-box;這個屬性的話，就會把1px像素的邊框算在總寬度百分百上這樣就不會超出屏幕的寬度了。同樣內邊距也會算在總寬度裏