也說border box盒模型

border-box是css3的乙個新屬性，使用這個屬性，和以往的content-box比起來，會有諸多便利之處，bootstrap3也使用的是這個border-box，甚至很多人認為，border-box才是我們真正所需要的盒模型。或許，這也是w3c為何加入這個屬性的原因之一吧。

border-box與content-box有什麼不同？我們先來demo一下，一**竟。

#box1 #box2

ok.來看一下效果：

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

使用這個屬性，再也不會因為修改border和padding而使修改布局大動干戈了。

接下來就是如何在專案中使用這個屬性了。借用一篇部落格，

這篇部落格中描述了如何更好的使用這個屬性。在此之前，我都是這樣用的：

/*更改盒模型為border-box*/ *, *:before, *:after

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

看看前輩是如何使用：

html

*, *:before, *:after

不錯，使用了繼承！而且沒有使用瀏覽器字首！因為現代瀏覽器，ie8+都是支援這個屬性的。在不需要做相容時，這裡也就是ie8及其以上時，去掉字首吧, 使用inherit吧。

inherit的ie6 ie7 ie8(q) 不支援 css 特性的 'inherit' 值及 ie8(s) opera 對此特性值的支援缺陷

給出一張相容性的，也可以直接訪問html5please.com：

ie67我們使用那個.htc檔案，最好使用ie條件注釋來引入，畢竟15k的大小呢（不建議讓無辜的現代瀏覽器使用者來為這15k買單）。

* *, *:before, *:after

不假思索，不加思考的就這樣用了border-box真的好麼？border-box不會破壞本層級的布局，但是當我們改變乙個盒子的表現時，我們會發現，所有的巢狀元素發生了一些改變，儘管我們並沒有對巢狀元素做什麼。這樣，可能又會引入一些新的不可預知的問題，或許這些問題會導致布局比以往變得更加複雜！

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