css3中calc()使用

 今天看到别人的代码里面有 calc(100% - 10px);愣了一下，很是惊奇，心里想着：还能这么用？赶紧百度一下，发现是一个新大陆，赶紧来做笔记。

        calc()就是实现自适应的布局 【当然一般想的是box-sizing,要开始回想了，在文章后赶紧做点笔记吧】

calc可以理解是个function(),它可以给元素的border、margin、pading、font-size和width等属性设置动态值

calc()运算规则：

1. 使用“+”、“-”、“*” 和 “/”四则运算；
2. 可以使用百分比、px、em、rem等单位；
3. 可以混合使用各种单位进行计算；
4. 表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的；
5. 表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。

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中被删除。