css中会计算的属性,css3中样式计算属性calc()的使用和总结

calc的介绍

在css3样式中有一个类似与函数的计算属性calc()，它主要用于指定元素的长度，无论是border、margin、pading、font-size和width等属性都可以使用calc来设置动态值。calc支持的运算单位有rem , em , %, px，calc是支持单位的混合使用的，其计算优先级别和数学一致。

calc的用法

.elm{

width:calc(expression);

}

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

注意1： 表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的；而对于“*”，“/”并没有这种要求，但为了风格的统一，建议前后也要留空格。例如：

width: calc(100% -8px); /* 这样会出错,结果为0 */

width: calc(100% - 8px); /* 当 + - 符号用空格隔开时,运算成功 */

注意2：使用 * / 运算符时,必须保证有一个值为数值类型;

calc的兼容:

在IE9+、FF4.0+、Chrome19+、Safari6+支持较好，移动端支持不理想。 如图：