box-sizing 屬性允許您以特定的方式定義匹配某個(gè)區(qū)域的特定元素。box-sizing是CSS3的box屬性之一。一說到CSS的盒模型(Box model)我想很多人都會比較煩，特別是對于新手，然而這個(gè)Box model又是我們CSS運(yùn)用中比較重要的一個(gè)屬性。那么CSS3的Box-sizing跟盒模型有什么關(guān)系呢?第一句話就說了，Box-sizing是CSS3的Box屬性之一，那他當(dāng)然也遵循CSS的Box model原理，為了能更好的學(xué)習(xí)和理解這個(gè)Box-sizing屬性，我們有必要先了解一下CSS中Box model的原理。

　　例如，假如您需要并排放置兩個(gè)帶邊框的框，可通過將 box-sizing 設(shè)置為 "border-box"。這可令瀏覽器呈現(xiàn)出帶有指定寬度和高度的框，并把邊框和內(nèi)邊距放入框中。

　　如果你寫過CSS或者你接觸過CSS，相信你一定對盒子模型一點(diǎn)都不陌生。CSS其中一個(gè)讓人比較困惑的地方就在于它的盒子模型中關(guān)于高度和寬度的計(jì)算，別說那些初學(xué)者了，就是寫過很久CSS的人也一樣會有如此的感覺。CSS中的高度和寬度總是不那么直觀，讓你總是很困惑，不能一眼就能分辨出其高度和寬度。有的時(shí)候你希望它的寬度是100px，但實(shí)際情況卻總不是這樣。然而，設(shè)置正確的box-sizing的屬性，盒子的高度和寬度會的確就是你設(shè)置的100px。是否有點(diǎn)暈了呢，好了，下面我詳細(xì)介紹下。

　　1、盒子模型

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

　　padding + border + width = 盒子的寬度

　　padding + border + height = 盒子的高度

　　這看起來并不是那么直觀，那么我們看一個(gè)圖：

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

　　這導(dǎo)致的直接結(jié)果是當(dāng)我們希望頁面呈現(xiàn)的盒子的寬度是200px的時(shí)候，我們需要減去它的左右邊框和左右補(bǔ)白，然后設(shè)置為對應(yīng)的CSS寬度。例如上圖，我們設(shè)置希望盒子寬度為200px，則需要先減去左右補(bǔ)白各20px，左右邊框各1px，然后設(shè)置對應(yīng)的CSS寬度158px。這讓代碼看起來有點(diǎn)匪夷所思，尤其是對新手來說(我就在這個(gè)問題上困惑了很久)。我明明設(shè)置的寬度是158px，它卻呈現(xiàn)了200px。這多少有點(diǎn)不那么直觀和一目了然。

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