css属性中使用数学计算——calc()函数

css3提供了一个calc()函数，允许我们在css中进行数学计算。先看一个例子：

假如你想设置宽度为父元素容器的1/3，你可能这么写：

width: 33.3333333%;

使用calc()函数你还能这么写：

width: calc(100% / 3);

也就是能在calc()写入一个表达式，这个表达式满足以下规则：

表达式规则：

1. 表达式支持加、减、乘、除，其中“ + ”和“ - ”运算符，使用前后必须添加空格（向前兼容，“-”等可能会用作连字符）；

2. 运算符“ * ”和“ / ”前后可不加空格，但为了保持格式统一，一般也会加上空格；

3. 表达式支持百分比“%”，也支持单位（px、rem、em等）；

4. 表达式内可以混合使用绝对值和相对值。如：

width: calc(100% - 20px);/*表示宽度小于其父元素20px*/

5. calc()可以嵌套。内部的calc对外部的calc来说实际上可视为表达式中的简单括号，如：

width: calc( 100% / calc(100px * 2) );

兼容性处理：

calc()已经被大多数浏览器支持，对于存在兼容性的浏览器，整个属性值表达式将被忽略。