css盒模型宽高混合计算calc

例如:

  .element{
    width:calc(expression);
}

兼容性：在IE9+、FF4.0+、Chrome19+、Safari6+都得到了较好支持，但是在移动端的支持不是很好。

其中，expression是一个用来计算长度的表达式，支持“+”，“-”，“*”，“/”运算符。

表达式中有“+”，“-”运算符的，前后必须要有空格，例如 “width:calc(100% - 20px)”这种写法；而对于“*”，“/”并没有这种要求，但为了风格的统一，建议前后也要留空格。

总结 :

1.兼容性：在IE9+、FF4.0+、Chrome19+、Safari6+支持较好，移动端支持不理想；

2.表达式支持加、减、乘、除运算，同时也支持单位的混合使用（%、px、em等）;

3.表达式中有“+”，“-”运算符的，前后必须要有空格。

参考原文地址：http://www.cnblogs.com/dan-dan/p/4589616.html