box-sizing屬性包括content-box（default），border-box。

1、content-box，border和padding不計算入width之內(nèi)

2、border-box，border和padding計算入width之內(nèi)，（竟然是IE盒子模型標(biāo)準(zhǔn)）

注意：ie8+瀏覽器支持content-box和border-box;

在我們使用了box-sizing：border-box；這一屬性之后，你頁面所有元素的寬高就會隨著你設(shè)置的width、height而固定，無論你再怎么折騰padding、border，整個元素的尺寸是不會有任何變化的，只是實(shí)際內(nèi)容content的尺寸會隨著被壓縮拉伸。這樣的整體布局就穩(wěn)定了許多，而不會因為某一個元素的邊框微調(diào)而發(fā)生崩塌,特別是在我用到這個box-sizing參數(shù)后，在調(diào)整圖片的時候往往會回行。

雖然IE在大家的眼里是一個奇葩的存在，而ie盒模型標(biāo)準(zhǔn)也跟w3c盒模型標(biāo)準(zhǔn)有出入，但筆者個人認(rèn)為在盒模型上，ie盒模型更加合理化。因為常規(guī)的布局思維是我定好整體的寬高之后，里面元素的整體尺寸會確定下來，后面才是考慮這個元素的內(nèi)邊距以及邊框，如果我已經(jīng)確定好了大體的布局，再去微調(diào)邊框而導(dǎo)致了整體布局的崩塌，這顯然是不科學(xué)的，所以這也是我極力推崇前端布局使用box-sizing：border;的原因。

然而一個殘酷的顯示就是IE8 以下的瀏覽器對css3是不支持的，所以box-sizing：border;屬性在ie8以下的瀏覽器中是無效的，這可能是影響此css元素流行的重大原因，不知道什么時候業(yè)內(nèi)才能同仇敵愾，一起抵制IE8以下瀏覽器，還我們前端人員一片凈土。

如果你的項目不需要考慮ie6/ie7的用戶，那么請大膽的使用box-sizing：border;相信它會讓你的前端布局靈活很多，記得在css reset（樣式重置）的時候就加上它，一勞永逸....