也說border-box盒模型

border-box是css3的一個新屬性，使用這個屬性，和以往的content-box比起來，會有諸多便利之處，bootstrap3也使用的是這個border-box，甚至不少人認爲，border-box纔是咱們真正所須要的盒模型。或許，這也是W3C爲什麼加入這個屬性的緣由之一吧。

border-box與content-box有什麼不一樣？咱們先來demo一下，一探究竟。

#box1{
  box-sizing: border-box;
  width: 200px;
  height: 150px;
  padding: 10px;
  border: 4px dashed orange;
  background-color: gray;
  margin-bottom: 20px;
}
#box2{
  box-sizing: content-box;/*其實也能夠不寫這句，由於默認爲content-box*/
  width: 200px;
  height: 150px;
  padding: 10px;
  border: 4px dashed orange;
  background-color: gray;
}

ok.來看一下效果：

嗯，這就是border-box;w3schools中對這個屬性的描述：

使用這個屬性，不再會由於修改border和padding而使修改佈局大動干戈了。

最佳化實踐

接下來就是如何在項目中使用這個屬性了。借用一篇博客，http://www.paulirish.com/2012/box-sizing-border-box-ftw/
這篇博客中描述瞭如何更好的使用這個屬性。在此以前，我都是這樣用的：

/*更改盒模型爲border-box*/
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

嗯，或許你也是這樣用的。* 選擇器效率也不錯，只要你不這樣使用 .foo > * 。看了這篇文章事後我才發現，特麼的原來我這樣使用是有問題的。由於我強制全局全部的使用這個規範，這致使對組件十分不友好！

看看前輩是如何使用：

/* apply a natural box layout model to all elements, but allowing components to change */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

不錯，使用了繼承！並且沒有使用瀏覽器前綴！由於現代瀏覽器，IE8+都是支持這個屬性的。在不須要作兼容時，這裏也就是IE8及其以上時，去掉前綴吧, 使用inherit吧。

inherit的IE6 IE7 IE8(Q) 不支持 CSS 特性的 'inherit' 值及 IE8(S) Opera 對此特性值的支持缺陷 http://www.w3help.org/zh-cn/causes/RA8001

給出一張兼容性的圖片，也能夠直接訪問html5please.com：

IE67咱們使用那個.htc文件，最好使用IE條件註釋來引入，畢竟15k的大小呢（不建議讓無辜的現代瀏覽器用戶來爲這15k買單）。

<!--[if lte IE7]>  
    <link rel="stylesheet" href="css/ie--box-border.css">  
<![endif]-->

* {  
     behavior: url(css/boxsizing.htc);  
}
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

因爲inherit屬性在IE六、7以及IE8的混雜模式下是不被支持的，因此又回到了從前。
嗯，就這樣，兼容IE6+了，就算在中國這麼嚴峻的形勢下，也可happy的使用了。

反思

不假思索，不加思考的就這樣用了border-box真的好麼？border-box不會破壞本層級的佈局，可是當咱們改變一個盒子的表現時，咱們會發現，全部的嵌套元素髮生了一些改變，儘管咱們並無對嵌套元素作什麼。這樣，可能又會引入一些新的不可預知的問題，或許這些問題會致使佈局比以往變得更加複雜！

到底該使用哪一個？君請隨意，適合本身的永遠是最好的！