css3 calc()方法
1、什么是calc()?
学习calc()之前，我们有必要先知道calc()是什么？只有知道了他是个什么东西？在实际运用中更好的使用。
calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。比如说，你可以使用calc()给元素的border、margin、padding、font-size和width等属性设置动态值。为何说是动态值呢？因为是我们使用的达式来得到的值。不过calc()最大的好处就是在流体布局上，可以通过calc()计算得到元素的宽度。
2、calc()能做什么？
calc()能让你给元素的做计算，你可以给一个div元素，使用百分比、em、px和rem单位值计算出其宽度或者高度，比如说“width:calc(50% + 2em)”，这样一来你就不用考虑元素div的宽度到底是多少，而把这个烦人的任务交由浏览器去计算。
3、calc()语法
calc()语法非常简单，就像我们小时候学加 （+）、减（-）、乘（*）、除（/）一样，使用数学表达式来表示：
.elm {
width: calc(expression);
}
其中"expression"是一个表达式，用来计算长度的表达式。
4、浏览器的兼容性
浏览器对calc()的兼容性还算不错，在IE9+、FF4.0+、Chrome19+、Safari6+都得到较好支持，同样需要在其前面加上各浏览器厂商的识别符，不过可惜的是，移动端的浏览器仅有 "Firefox for android 14.0"支持，其他的全军覆没。我们在实际使用时，同样需要添加浏览器的前缀。
.elm {
/ * Firefox * /
-moz-calc(expression);
/ * chrome safari* /
-webkit-calc(expression);
/* Standard */
calc();
}
5、calc()的运算规则
calc()使用通用的数学运算规则，但是也提供更智能的功能：
• 使用加 （+）、减（-）、乘（*）、除（/）四运算；
• 可以使用百分比、px、em、rem等单位；
• 可以混合使用各种单位进行计算；
如：
• 表达式中有 + 和 - 时其前后必须要有空格，如“widht: calc(12%+5em)”这没有空格的写法是错误的；
• 表达式中有 * 和 / 时其前后可以没有空格，但建议留有空格。 注：运算的时候，需要在运算符两边添加空格
注：乘除的时候，是只写倍数的，不写单位
width:calc(100% * 2)
注：应用场景，在百分比与像素进行计算的时候，用的比较多
