<calc-sum>

<calc-sum> CSS 数据类型表示执行任何 CSS 数学函数中的计算的表达式。该表达式在两个值之间执行加法和减法的基本算术运算。

语法

<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        

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

描述

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

可以在单个表达式中使用不同的单位类型。例如，从 % 中减去 px，如 calc(100% - 10px)，是一个有效的表达式。

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

+ 和 - 运算符**必须用空格括起来**。例如，calc(50% -8px) 将被解析为一个百分比后跟一个负长度——一个无效的表达式——而 calc(50% - 8px) 是一个百分比后跟一个减法运算符和一个长度。同样，calc(8px + -50%) 被视为一个长度后跟一个加法运算符和一个负百分比。

规范

未找到规范

未找到 css.types.calc-sum 的规范数据。
检查此页面是否存在问题或为其贡献缺失的 spec_url 到 mdn/browser-compat-data。还要确保规范包含在 w3c/browser-specs.

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

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