今天看到别人的代码里面有 calc(100% - 10px);愣了一下，很是惊奇，心里想着：还能这么用？赶紧百度一下，发现是一个新大陆，赶紧来做笔记。
calc()就是实现自适应的布局 【当然一般想的是box-sizing,要开始回想了，在文章后赶紧做点笔记吧】
calc可以理解是个function(),它可以给元素的border、margin、pading、font-size和width等属性设置动态值
calc()运算规则：
- 使用“+”、“-”、“*” 和 “/”四则运算；
- 可以使用百分比、px、em、rem等单位；
- 可以混合使用各种单位进行计算；
- 表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的；
- 表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。
calc()兼容性
1.在IE9+、FF4.0+、Chrome19+、Safari6+都得到较好支持
2.移动端的浏览器还没仅有“firefox for android 14.0”支持，其他的全军覆没。
3.在实际使用时，同样需要添加浏览器的前缀-moz-calc(exp), -webkit-calc(exp), calc()
在自适应大多使用百分比，这下就可以直接使用了cacl(100% - (50px + 10px) * 2),搞定
扩充box-sizing：
在 IE 盒模型中
box width = content width + padding left + padding right + border left + border right，
box height = content height + padding top + padding bottom + border top + border bottom，
而在 W3C 标准的盒模型中，box 的大小就是 content 的大小
box width = content width，
box height = content height，
所以css3中增加box-sizing, 可控制宽度的自适应，防止父级内容撑开（ie怪异模式Quirks就不会啦）。其中可设置以下三种值：
1.content-box默认值，标准盒子模型。 width 与 height 只包括内容的宽和高， 不包括边框（border），内边距（padding），外边距（margin）。注意: 内边距, 边框 & 外边距 都在这个盒子的外部。 比如. 如果 .box { 350px}; 而且 {border: 10px solid black;} 那么在浏览器中的渲染的实际宽度将是370px;
尺寸计算公式：width = 内容的宽度，height = 内容的高度。宽度和高度都不包含内容的边框（border）和内边距（padding）。
2.border-box width 和 height 属性包括内容，内边距和边框，但不包括外边距。这是当文档处于 Quirks模式 时Internet Explorer使用的盒模型。注意，填充和边框将在盒子内 , 例如, .box { 350px; border: 10px solid black;} 导致在浏览器中呈现的宽度为350px的盒子。内容框不能为负，并且被分配到0，使得不可能使用border-box使元素消失。
这里的维度计算为：width = border + padding + 内容的 width，height = border + padding + 内容的 height。
3.padding-box width 和 height 属性包括内容和内边距，但是不包括边框和外边距。只有Firefox实现了这个值，它在Firefox 50中被删除。