calc()看起来像个js的函数，但它实际上是css3的一个属性，它能自动计划宽度，高度等。
平时在制作页面的时候，总会碰到有的元素是100%的宽度。众所周知，如果元素宽度为100%时，其自身不带其他盒模型属性设置还好，要是有别的，那将导致盒子撑破。比如说，有一个边框，或者说有margin和padding，这些都会让你的盒子撑破。我们换句话来说，如果你的元素宽度是100%时，只要你在元素中添加了border,padding,margin任何一值，都将会把元素盒子撑破（标准模式下，除IE怪异模式）。这样一来就会相当的麻烦，平时我们碰到这样的现象时，也是相当的谨慎，有时甚至无法解决，只能通过改变结构来实现。就算你通过繁琐的方法实现了，但有于浏览器的兼容性而导致最终效果不一致。虽然前面介绍的CSS3属性中的box-sizing在一定程度上解决这样的问题，其实今天的calc()函数功能实现上面的效果来得更简单。
calc()能做什么？
calc()能让你给元素的做计算，你可以给一个div元素，使用百分比、em、px和rem单位值计算出其宽度或者高度，比如说“width:calc(50% + 2em)”，这样一来你就不用考虑元素DIV的宽度值到底是多少，而把这个烦人的任务交由浏览器去计算。
calc()语法
calc()语法非常简单，就像我们小时候学加 （+）、减（-）、乘（*）、除（/）一样，使用数学表达式来表示：
.elm {
width: calc(expression);
}
其中"expression"是一个表达式，用来计算长度的表达式。
calc()的运算规则
calc()使用通用的数学运算规则，但是也提供更智能的功能：
- 使用“+”、“-”、“*” 和 “/”四则运算；
- 可以使用百分比、px、em、rem等单位；
- 可以混合使用各种单位进行计算；
- 表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的；
- 表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。
浏览器的兼容性
浏览器对calc()的兼容性还算不错，在IE9+、FF4.0+、Chrome19+、Safari6+都得到较好支持，同样需要在其前面加上各浏览器厂商的识别符，不过可惜的是，移动端的浏览器还没仅有“firefox for android 14.0”支持，其他的全军覆没。
大家在实际使用时，同样需要添加浏览器的前缀
.elm {
/*Firefox*/
-moz-calc(expression);
/*chrome safari*/
-webkit-calc(expression);
/*Standard */
calc();
}实例：
<div class="box">
<div class="inner"></div>
</div>
.box{width:400px;}
.inner{
padding: 20px;
border: 1px solid #999;
width:90%;/*不支持属性的浏览器**/
width:-moz-calc(100% - 20*2 + 1*2); /**20是padding值，1是边框的值**/
width:-webkit-calc(100% - (20 + 1) * 2);
width:calc(100% - (20 + 1) * 2);
}