什麼是盒模型
首先我們說一下盒子的問題：比如一個盒子中裝一本書，那麼盒子對應div，書就是div中的content，書與盒子之間的距離是padding，盒子的厚度是border，兩個盒子之間的距離就是margin，這樣理解起來就容易多了。
從上圖中我們可以看出，是一個寬高爲170*50的div，padding是10px，border是5px，margin是15px。代碼如下：
width: 170px;
height: 50px;
padding: 10px;
border: 5px solid #000;
margin: 15px;所以盒模型中的div的實際佔的寬度如下：
(margin-left)+(boder-left)+(padding-left)+width+(padding-right)+(boder-right)+(margin-right)
此時
width=content
當我們把div的box-sizing設置爲border-box;
width: 170px;
height: 50px;
padding: 10px;
border: 5px solid #000;
margin: 15px;
box-sizing: border-box;
從上圖可以看出，div的實際寬度爲：
(margin-left)+width+(margin-right)
此時
width=(boder-left)+(padding-left)+content+(padding-right)+(boder-right)
box-sizing默認值是 content-box;即width=content。因此可以通過設置box-sizing來改變盒子的真實寬度