標(biāo)簽（空格分隔）： CSS布局
說(shuō)起box-sizing:border-box我們就不能不理解盒子模型。
這里我簡(jiǎn)要的講下盒子模型窿锉。
盒子模型
盒子模型分為標(biāo)準(zhǔn)盒子模型和IE盒子模型酌摇，每個(gè)盒子都有：邊界、邊框嗡载、填充窑多、內(nèi)容四個(gè)屬性。
標(biāo)準(zhǔn)盒子模型
簡(jiǎn)要的說(shuō)就是width只包含content內(nèi)容的叫做標(biāo)準(zhǔn)盒子模型洼滚。
IE盒子模型
也就是width包含content+padding+border的盒子模型叫做IE盒子模型埂息。
box-sizing：border-box的作用就是使瀏覽器使用IE的盒子模型。
使用IE的盒子模型我們?cè)谠O(shè)置width為百分比的時(shí)候，設(shè)置padding和border的時(shí)候width的百分比不好計(jì)算的問(wèn)題就被解決了千康。
當(dāng)然box-sizing在使用的時(shí)候會(huì)存在一些兼容的問(wèn)題享幽，這樣就迫使我們使用一套標(biāo)準(zhǔn)盒子模型的方案，一套IE盒子模型的方案拾弃，這活生生的想玩死我們么琉闪。
calc()
這個(gè)時(shí)候我們不得不說(shuō)下calc()這個(gè)css3新增的功能。其實(shí)他可以實(shí)現(xiàn)box-sizing：border-box的功能砸彬，而且避免我們出現(xiàn)的一些兼容性問(wèn)題颠毙。
calc()的使用方法
.element { width: calc(expression);}
calc的運(yùn)算規(guī)則
1.使用'+'、'-'砂碉、"*" 和 “/”四則運(yùn)算蛀蜜；
2.可以使用百分比、px增蹭、em滴某、rem等單位；
3.可以混合使用各種單位進(jìn)行計(jì)算滋迈；
4.表達(dá)式中有“+”和“-”時(shí)霎奢，其前后必須要有空格，如"widht: calc(12%+5em)"這種沒(méi)有空格的寫(xiě)法是錯(cuò)誤的饼灿；
5.表達(dá)式中有“*”和“/”時(shí)幕侠，其前后可以沒(méi)有空格，但建議留有空格碍彭。
瀏覽器的兼容性
所以大家在使用calc()的時(shí)候,同樣需要添加瀏覽器的前綴晤硕，大家可以去了解autoprefixer，可以幫助大家自動(dòng)添加前綴庇忌。
.elm {
/*Firefox*/ -moz-calc(expression);
/*chrome safari*/ -webkit-calc(expression);
/*Standard */ calc(); }
calc()的使用示例
.container{
width: 1024px; /* 不支持calc()的回退方案 給不支持calc()的瀏覽器設(shè)置了一個(gè)固定寬度值“1024px”舞箍。*/
width: -moz-calc(100% - 40px);
width: -webkit-calc(100% - 40px);
width: calc(100% - 40px);
margin: 0 auto;
}
希望大家都能用好calc()這個(gè)css3的新增屬性吧
