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

1、content-box，border和padding不計算入width之內

2、border-box，border和padding計算入width之內，（竟然是IE盒子模型標準）

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

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

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

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

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