關于CSS重要的一個概念就是CSS盒子模型。它控制著頁面這些元素的高度和寬度。盒子模型多少會讓人產生一些困惑，尤其當涉及到高度和寬度計算的時候。真正盒子的寬度(在頁面呈現出來的寬度)和高度，需要加上一些其它的屬性，例如：

padding + border + width= 盒子的寬度

padding+ border + height = 盒子的高度

這意味著，如果我們設置一個寬度為200px，而實際呈現的盒子的寬度可能會大于200px(除非沒有左右邊框和左右補白)。這可能看起來比較怪，CSS設置的寬度僅僅是內容區(qū)的寬度，而非盒子的寬度。同樣，高度類似。

這導致的直接結果是當我們希望頁面呈現的盒子的寬度是200px的時候，我們需要減去它的左右邊框和左右補白，然后設置為對應的CSS寬度。例如，我們設置希望盒子寬度為200px，則需要先減去左右補白各20px，左右邊框各1px，然后設置對應的CSS寬度158px。

幸運的是，我們有更好的方法達到我們想要的目的。

box-sizing

語法：box-sizing:border-box 

當你設置box-sizing:border-box以后，這就能達到你想要的目的。例如，上面我們想要一個寬度為200px的盒子，那么我們直接設置寬度為200px。是不是看起來清晰多了。當再設置它的左右邊框和左右補白后，它的內容區(qū)會自動調整。這可能更直接和一目了然。CSS代碼如下：

div {    box-sizing: border-box;    width: 200px;    padding: 20px;    border: 1px solid #DDD;
}