标签（空格分隔）： CSS布局
说起box-sizing:border-box我们就不能不理解盒子模型。
这里我简要的讲下盒子模型。
盒子模型
盒子模型分为标准盒子模型和IE盒子模型，每个盒子都有：边界、边框、填充、内容四个属性。
标准盒子模型
简要的说就是width只包含content内容的叫做标准盒子模型。
1408656-7fb37d4da3d93dfb.jpg
IE盒子模型
也就是width包含content+padding+border的盒子模型叫做IE盒子模型。
1408656-af2b13c17ef01dc0.jpg
box-sizing：border-box的作用就是使浏览器使用IE的盒子模型。
使用IE的盒子模型我们在设置width为百分比的时候，设置padding和border的时候width的百分比不好计算的问题就被解决了。
当然box-sizing在使用的时候会存在一些兼容的问题，这样就迫使我们使用一套标准盒子模型的方案，一套IE盒子模型的方案，这活生生的想玩死我们么。
calc()
这个时候我们不得不说下calc()这个css3新增的功能。其实他可以实现box-sizing：border-box的功能，而且避免我们出现的一些兼容性问题。
calc()的使用方法
.element { width: calc(expression);}
calc的运算规则
1.使用'+'、'-'、"*" 和 “/”四则运算；
2.可以使用百分比、px、em、rem等单位；
3.可以混合使用各种单位进行计算；
4.表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的；
5.表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。
浏览器的兼容性
浏览器兼容表.jpg
所以大家在使用calc()的时候,同样需要添加浏览器的前缀，大家可以去了解autoprefixer，可以帮助大家自动添加前缀。
.elm {
/*Firefox*/ -moz-calc(expression);
/*chrome safari*/ -webkit-calc(expression);
/*Standard */ calc(); }
calc()的使用示例
.container{
width: 1024px; /* 不支持calc()的回退方案 给不支持calc()的浏览器设置了一个固定宽度值“1024px”。*/
width: -moz-calc(100% - 40px);
width: -webkit-calc(100% - 40px);
width: calc(100% - 40px);
margin: 0 auto;
}
希望大家都能用好calc()这个css3的新增属性吧
