標(biāo)簽（空格分隔）： CSS布局
說起box-sizing:border-box我們就不能不理解盒子模型。
這里我簡要的講下盒子模型。
盒子模型
盒子模型分為標(biāo)準(zhǔn)盒子模型和IE盒子模型，每個盒子都有：邊界、邊框、填充、內(nèi)容四個屬性。
標(biāo)準(zhǔn)盒子模型
簡要的說就是width只包含content內(nèi)容的叫做標(biāo)準(zhǔn)盒子模型。
IE盒子模型
也就是width包含content+padding+border的盒子模型叫做IE盒子模型。
box-sizing：border-box的作用就是使瀏覽器使用IE的盒子模型。
使用IE的盒子模型我們在設(shè)置width為百分比的時候，設(shè)置padding和border的時候width的百分比不好計算的問題就被解決了。
當(dāng)然box-sizing在使用的時候會存在一些兼容的問題，這樣就迫使我們使用一套標(biāo)準(zhǔn)盒子模型的方案，一套IE盒子模型的方案，這活生生的想玩死我們么。
calc()
這個時候我們不得不說下calc()這個css3新增的功能。其實他可以實現(xiàn)box-sizing：border-box的功能，而且避免我們出現(xiàn)的一些兼容性問題。
calc()的使用方法
.element { width: calc(expression);}
calc的運算規(guī)則
1.使用'+'、'-'、"*" 和 “/”四則運算；
2.可以使用百分比、px、em、rem等單位；
3.可以混合使用各種單位進行計算；
4.表達式中有“+”和“-”時，其前后必須要有空格，如"widht: calc(12%+5em)"這種沒有空格的寫法是錯誤的；
5.表達式中有“*”和“/”時，其前后可以沒有空格，但建議留有空格。
瀏覽器的兼容性
所以大家在使用calc()的時候,同樣需要添加瀏覽器的前綴，大家可以去了解autoprefixer，可以幫助大家自動添加前綴。
.elm {
/*Firefox*/ -moz-calc(expression);
/*chrome safari*/ -webkit-calc(expression);
/*Standard */ calc(); }
calc()的使用示例
.container{
width: 1024px; /* 不支持calc()的回退方案 給不支持calc()的瀏覽器設(shè)置了一個固定寬度值“1024px”。*/
width: -moz-calc(100% - 40px);
width: -webkit-calc(100% - 40px);
width: calc(100% - 40px);
margin: 0 auto;
}
希望大家都能用好calc()這個css3的新增屬性吧
