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

padding + border + width= 盒子的寬度

padding+ border + height = 盒子的高度

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

這導(dǎo)致的直接結(jié)果是當(dāng)我們希望頁面呈現(xiàn)的盒子的寬度是200px的時(shí)候，我們需要減去它的左右邊框和左右補(bǔ)白，然后設(shè)置為對(duì)應(yīng)的CSS寬度。例如，我們?cè)O(shè)置希望盒子寬度為200px，則需要先減去左右補(bǔ)白各20px，左右邊框各1px，然后設(shè)置對(duì)應(yīng)的CSS寬度158px。

幸運(yùn)的是，我們有更好的方法達(dá)到我們想要的目的。

box-sizing

語法：box-sizing:border-box 

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

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