關于CSS重要的一個概念就是CSS盒子模型。它控制著頁面這些元素的高度和寬度。盒子模型多少會讓人產生一些困惑，尤其當涉及到高度和寬度計算的時候。真正盒子的寬度(在頁面呈現出來的寬度)和高度，需要加上一些其它的屬性，例如：
padding + border + width= 盒子的寬度
padding+ border + height = 盒子的高度
這意味著，如果我們設置一個寬度為200px，而實際呈現的盒子的寬度可能會大于200px(除非沒有左右邊框和左右補白)。這可能看起來比較怪，CSS設置的寬度僅僅是內容區的寬度，而非盒子的寬度。同樣，高度類似。
這導致的直接結果是當我們希望頁面呈現的盒子的寬度是200px的時候，我們需要減去它的左右邊框和左右補白，然后設置為對應的CSS寬度。例如，我們設置希望盒子寬度為200px，則需要先減去左右補白各20px，左右邊框各1px，然后設置對應的CSS寬度158px。
幸運的是，我們有更好的方法達到我們想要的目的。
box-sizing
語法：box-sizing:border-box
當你設置box-sizing:border-box以后，這就能達到你想要的目的。例如，上面我們想要一個寬度為200px的盒子，那么我們直接設置寬度為200px。是不是看起來清晰多了。當再設置它的左右邊框和左右補白后，它的內容區會自動調整。這可能更直接和一目了然。CSS代碼如下：
div { box-sizing: border-box; width: 200px; padding: 20px; border: 1px solid #DDD;
}上一篇： css3實現上下浮動的效果
下一篇： 從變量看javaScript
關鍵詞:
