概述

calc() 此CSS函数让你在声明CSS属性值时执行一些计算。它可以用在如下场合：<length>、<frequency>, <angle>、<time>、<number>、或<integer>。

语法

/* property: calc(expression) */
width: calc(100% - 80px);

此 calc()函数用一个表达式作为它的参数，用这个表达式的结果作为值。这个表达式可以是任何如下操作符的组合，采用标准操作符处理法则的简单表达式。

  • 加法（ + ）
  • 减法（ - ）
  • 乘法（ * ），乘数中至少要有一个是 <number> 类型的
  • 除法（ / ），除数（/右面的数）必须是 <number> 类型的

表达式中的操作数可以使用任意<length> 值。如果你愿意，你可以在一个表达式中混用这类值的不同单位。在需要时，你还可以使用小括号来建立计算顺序。

注：

  1. 用 0 作除数会让 HTML 解析器抛出异常.
  2. （+）和（-）运算符的两边必须始终要有空白符。比如 calc(50% -8px) 会被解析成为一个无效的表达式：一个百分比后跟一个负数长度值。而 calc(8px + -50%) 会被解析成为一个长度后跟一个加号再跟一个负百分比。
  3. （*）和（/）运算符不需要空白符，但考虑到统一性，仍然推荐加上空白符。
  4. 涉及自动和固定布局表中的表列，表列组，表行，表行组和表单元格的宽度和高度百分比的数学表达式可视为已指定auto。

正式语法

calc( <calc-sum> )
where 
<calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*

where 
<calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*

where 
<calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )