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()已经被大多数浏览器支持,对于存在兼容性的浏览器,整个属性值表达式将被忽略。