calc()

試一試

width: calc(10px + 100px);

width: calc(100% - 30px);

width: calc(2em * 5);

width: calc(var(--variable-width) + 20px);

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">Change my width.</div>
</section>

:root {
  --variable-width: 100px;
}

#example-element {
  border: 10px solid black;
  padding: 10px;
}

語法

/* calc(expression) */
calc(100% - 80px)

/* Expression with a CSS function */
calc(100px * sin(pi / 2))

/* Expression containing a variable */
calc(var(--hue) + 180)

/* Expression with color channels in relative colors */
lch(from aquamarine l c calc(h + 180))

calc() 函式接受單個表示式作為其引數，表示式的結果用作 CSS 屬性的值。在此表示式中，運算元可以使用下面列出的運算子進行組合。當表示式包含多個運算元時，calc() 使用標準的運算子優先順序規則。

+

新增指定的運算元。

-

從第一個運算元中減去第二個運算元。

*

乘以指定的運算元。

/

用左側運算元（被除數）除以右側運算元（除數）。

除了 <number> 型別的值外，所有運算元都必須帶有適當的單位字串字尾，例如 px、em 或 %。你可以在表示式中為每個運算元使用不同的單位。如果需要，你還可以使用括號來確定計算順序。

描述

關於 calc() 有幾點需要注意，下面將詳細說明。

結果值

calc() 函式必須替代以下型別之一的完整 CSS 值

• <length>
• <frequency>
• <angle>
• <time>
• <flex>
• <resolution>
• <percentage>
• <number>
• <integer>
• 混合型別之一，例如 <length-percentage>

calc() 不能只替換百分比值、長度值等的數字部分，而不替換其後的單位。例如，calc(100 / 4)% 是無效的，而 calc(100% / 4) 是有效的。

calc() 的結果值必須與它所使用的上下文相容。例如，margin: calc(1px + 2px) 是有效的，但 margin: calc(1 + 2) 無效：它等同於指定 margin: 3，這會導致屬性被忽略。

當預期為 <integer> 時，calc() 表示式也可以評估為 <number>，它將被四捨五入到最接近的整數。因此，calc(1.4) 將導致值為 1。如果值的小數部分恰好是 0.5，則該值將四捨五入到正無窮大。例如，calc(1.5) 將導致值為 2，而 calc(-1.5) 將四捨五入為 -1。

calc() 遵循 IEEE-754 標準執行浮點運算，這導致了對 infinity 和 NaN 值的一些考慮。有關常量如何序列化的更多詳細資訊，請參閱 calc-keyword 頁面。

輸入注意事項

• calc() 無法對固有尺寸值（例如 auto 和 fit-content）執行計算。請改用 calc-size() 函式。
• * 和 / 運算子不需要空格，但為了保持一致性，建議新增空格。
• 允許巢狀 calc() 函式，在這種情況下，內部函式被視為簡單的括號。
• 在自動和固定佈局表中，涉及表格列、表格列組、表格行、表格行組和表格單元格的寬度和高度百分比的數學表示式可能被視為指定了 auto。
• 有關 + 和 - 表示式語法的更多資訊，請參閱 <calc-sum>。

CSS 型別化算術

當使用 calc() 乘以值時，使用 * 運算子，只有一個值可以包含單位。不支援 200px * 4px 等計算，因為 800px² 在 CSS 中沒有意義。

相反，200px / 4px 解析為 50，這在 CSS 中是有意義的。因此，當使用 calc() 函式除以數字時，使用 / 運算子，支援的瀏覽器允許運算元兩側都有單位，前提是它們是相同的資料型別。例如，100vw / 1px 是有效的，併產生一個無單位的值。

然後，商可以用作接受 <number> 作為值或引數的屬性或函式的值，或者透過乘以型別化值將其轉換為不同的資料型別。

有關 CSS 中型別化算術的完整解釋以及示例，請參閱 使用 CSS 型別化算術。

支援計算相對顏色中的顏色通道

calc() 函式可用於在相對顏色的上下文中直接操作顏色通道。這允許在 rgb()、hsl() 和 lch() 等顏色模型中動態調整顏色通道。

相對顏色語法定義了幾個顏色通道關鍵字，每個關鍵字都表示顏色通道的值為一個 <number>（有關更多資訊，請參閱通道值解析為 <number> 值）。calc() 函式可以使用這些顏色通道關鍵字對顏色通道執行動態調整，例如 calc(r + 10)。

正式語法

<calc()> = 
  calc( <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() 控制文字大小時，請確保其中一個值包含相對長度單位，例如

h1 {
  font-size: calc(1.5rem + 3vw);
}

這確保瞭如果頁面被縮放，文字大小也會隨之縮放。

• MDN 理解 WCAG，指南 1.4 解釋
• 理解成功標準 1.4.4 | W3C 理解 WCAG 2.0

示例

使用外邊距在螢幕上定位物件

calc() 可以輕鬆地使用設定的外邊距定位物件。在此示例中，CSS 建立了一個橫跨視窗的橫幅，橫幅兩側與視窗邊緣之間有 40 畫素的間隙。

.banner {
  position: absolute;
  left: 40px;
  width: calc(100% - 80px);
  border: solid black 1px;
  box-shadow: 1px 2px;
  background-color: yellow;
  padding: 6px;
  text-align: center;
  box-sizing: border-box;
}

<div class="banner">This is a banner!</div>

自動調整表單欄位大小以適應其容器

calc() 的另一個用例是幫助確保表單欄位適應可用空間，而不會超出其容器的邊緣，同時保持適當的外邊距。

我們來看一些 CSS

input {
  padding: 2px;
  display: block;
  width: calc(100% - 1em);
}

#form-box {
  width: calc(100% / 6);
  border: 1px solid black;
  padding: 4px;
}

在這裡，表單本身被設定為使用可用視窗寬度的 1/6。然後，為了確保輸入欄位保持適當的大小，我們再次使用 calc() 來確定它們的寬度應為其容器寬度減去 1em。然後，以下 HTML 使用此 CSS

<form>
  <div id="form-box">
    <label for="misc">Type something:</label>
    <input type="text" id="misc" name="misc" />
  </div>
</form>

使用 CSS 變數進行巢狀

你可以將 calc() 與 CSS 變數一起使用。考慮以下程式碼

.foo {
  --width-a: 100px;
  --width-b: calc(var(--width-a) / 2);
  --width-c: calc(var(--width-b) / 2);
  width: var(--width-c);
}

所有變數展開後，--width-c 的值將是 calc(calc(100px / 2) / 2)。當它分配給 .foo 的 width 屬性時，所有內部 calc() 函式（無論巢狀多深）都將扁平化為括號。因此，width 屬性的值最終將是 calc((100px / 2) / 2)，等於 25px。簡而言之，calc() 內部的 calc() 與使用括號是相同的。

調整相對顏色中的顏色通道

calc() 函式可用於調整相對顏色中的單個顏色通道，而無需將顏色通道值儲存為變數。

在下面的示例中，第一個段落使用<named-color>。在接下來的段落中，calc() 與 rgb() 和 hsl() 函式一起使用，以相對於原始命名顏色調整每個顏色通道的值。

<p class="original">Original text color in rebeccapurple</p>
<p class="increase-hue">Hue increased by 80</p>
<p class="increase-lightness">Lightness increased by 20</p>
<p class="decrease-lightness">Lightness decreased by 10</p>

p {
  font-family: monospace;
  font-size: 16px;
}

.original {
  color: rebeccapurple;
}

.increase-hue {
  color: lch(from rebeccapurple l c calc(h + 80));
}

.increase-lightness {
  color: lch(from rebeccapurple calc(l + 20) c h);
}

.decrease-lightness {
  color: lch(from rebeccapurple calc(l - 10) c h);
}

有關使用 calc() 函式推導相對顏色的另一個示例，請參閱《使用相對顏色》頁面上的使用數學函式部分。

規範

瀏覽器相容性

另見

• <calc-sum>
• <calc-keyword>
• CSS 函式
• CSS 中 calc() 的完整指南 (CSS-Tricks)