有关border-box的知识及延伸

标签（空格分隔）： 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的新增属性吧