<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>