了解盒子模型

盒子模型的概念不在此講述熔脂，可以百度谷歌了解一下腻要。

了解標準模型content-box

它的最大特點是柒竞，當已經(jīng)設(shè)定了width和height值的時候，padding和border不被包含在你定義的width和height之內(nèi)鸭叙，也就是說觉啊，你定義的width只負責content區(qū)域的寬度，如果想得到整個盒子寬度沈贝，需要再加上padding和border的厚度。

這個content-box就是標準模型勋乾，誕生最早宋下。content-box顧名思義，就是內(nèi)容盒子辑莫。

任何瀏覽器默認使用的都是標準模型学歧。

content-box的缺點

content-box的最大缺點就是：當你想讓兩個子容器float:left，寬度各50%各吨，然后給一點padding枝笨，最后讓子容器并排充滿父容器，一切想的挺美好揭蜒，然而你發(fā)現(xiàn)結(jié)果并不是這么美好横浑，因為子容器的盒子寬度已經(jīng)超出了父容器的一半，導致了折行屉更，于是徙融，width就不能50%了，只能是50%再減去padding的像素值瑰谜。是不是很不幸福欺冀？

了解“box-sizing: border-box”

“box-sizing: border-box”是一個較新的CSS 3聲明树绩，可能一些開發(fā)者都不曾聽過這個新的CSS聲明，更沒有用過隐轩，既然標準盒子模型誕生的早饺饭，又叫做標準盒子模型，為什么CSS 3中還要新增一個“border-box”呢职车？

border-box的優(yōu)勢

border-box的誕生瘫俊，主要就是解決content-box的最大缺點。border-box意味著子容器的padding和border的厚度都算在50%之內(nèi)提鸟，這樣军援，你可以隨意的修改padding和border的厚度值，根本不用擔心父容器被撐爆称勋。

border-box的兼容性

IE8已經(jīng)支持border-box胸哥，所以兼容性不是問題。

border-box是事實的標準赡鲜？

現(xiàn)在最著名的CSS框架幾乎都采用了border-box空厌，所以它才是事實的標準∫辏框架想要具備柵格系統(tǒng)嘲更，就肯定要去使用border-box，如果用content-box會有一種想死的感覺揩瞪。

怎么用border-box

box-sizing屬性是不具備繼承性的赋朦，原因很簡單，box-sizing屬性本來就應(yīng)該是靈活使用的李破，全局設(shè)定為border-box或者全局設(shè)定為content-box都有弊端宠哄。

假如你確定你的頁面整體或者某個大塊的所有元素都應(yīng)當用上border-box，那么你應(yīng)該搞一個：

* {
    box-sizing: border-box;
}

或者搞一個：

#某id * {
    box-sizing: border-box;
}

通常情況下嗤攻，上面這種代碼是沒必要加的毛嫉，事實上：你只需要在必須使用border-box的元素身上使用border-box，其他所有元素都保持content-box就好了妇菱。

border-box的使用場合

子元素有padding和border承粤，或者至少有其一，并且需要給子元素設(shè)定100%寬度（或者50%寬度等等）闯团，這時候顯然需要border-box辛臊。設(shè)為border-box之后，padding和border的厚度可以隨意調(diào)偷俭，并不會溢出父元素浪讳。如果是content-box，那么涌萤，寬度必然會溢出淹遵，而且口猜，為了不溢出，你設(shè)定子元素的寬度就只能是一個定值透揣，或者是一個計算值（比如calc(100% - 20px)）济炎。