<calc-sum>

语法

<calc-sum> 类型定义了两个数值以及它们之间的以下算术运算符之一。

+

将两个数字相加。

-

用左边的数字减去右边的数字。

正式语法

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

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

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

<calc-keyword> = 
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN        

描述

表达式中的操作数可以是任何 <length> 语法值。你可以使用 <length>、<frequency>、<angle>、<time>、<percentage>、<number> 或 <integer>。

两个操作数的类型必须一致。对于长度值，你不能使用 0 来表示 0px（或其他长度单位）。相反，你必须添加一个显式单位：margin-top: calc(0px + 20px); 是有效的，而 margin-top: calc(0 + 20px); 是无效的。百分比值类型根据上下文解析。例如，margin-top: calc(50% + 20px); 是有效的，因为 margin-top 将百分比解析为长度。

在 calc-sum 表达式中包含 CSS 变量也是允许的。以下代码 calc(10px + var(--variable)) 是一个有效的表达式。

+ 和 - 运算符必须被空白包围。例如，calc(50% -8px) 将被解析为“一个百分比后跟一个负长度”——这是一个无效的表达式——而 calc(50% - 8px) 是“一个百分比后跟一个减法运算符和一个长度”。同样地，calc(8px + -50%) 被视为“一个长度后跟一个加法运算符和一个负百分比”。

规范

另见

• <calc-product>
• <calc-value>
• <calc-keyword>