初學者指南：如何使用 CSS 的 calc() 函數

更新日期： 2024 年 9 月 14 日

在設計網頁時，你可能經常會遇到一些需要計算尺寸或間距的情況。

這時候，CSS 提供了一個非常有用的工具：calc() 函數。

calc() 可以讓你直接在 CSS 中進行數學運算，非常適合用來處理複雜的尺寸計算。

calc() 是什麼？

calc() 是一個 CSS 函數，用於在樣式表中進行數學運算。

它可以處理不同單位的值，例如百分比 (%)、像素 (px)、視窗單位 (vw、vh) 等，並將這些運算結果應用於 CSS 屬性上。

使用 calc() 的基本語法

使用 calc() 的語法非常簡單。你只需要在 calc() 內部輸入數學運算即可，像這樣：

element {
  property: calc(運算表達式);
}

例如，如果你想要設定一個元素的寬度為父元素的 100% 減去 50px，可以這樣寫：

.box {
  width: calc(100% - 50px);
}

這個例子說明了， calc() 如何讓你靈活地使用不同單位，來計算元素的尺寸。

常見的使用場景

設置動態間距

假設你想要設定一個標題的左右內間距，左側為 20px，右側為父容器寬度的一半減去 10px，可以這樣寫：

h1 {
  padding-left: 20px;
  padding-right: calc(50% - 10px);
}

這樣，無論父容器的大小如何變化，右側的間距都會隨之調整。

結合固定值和相對值

在一些布局中，你可能會需要結合固定的邊框寬度與相對的容器寬度。例如：

.container {
  width: calc(100% - 2rem);
}

這段代碼會讓 .container 的寬度永遠比父容器小 2rem。

結合 CSS 變數

calc() 與 CSS 變數（custom properties）結合使用時，更能發揮其靈活性。CSS 變數讓你可以在樣式表中定義可重複使用的值，然後再結合 calc() 來進行運算。

例如，假設你定義了一個全局的邊距變數，並希望在不同的元素中使用這個邊距值進行計算：

:root {
  --main-padding: 20px;
}

.container {
  padding: calc(var(--main-padding) * 2);
  margin-left: calc(50% + var(--main-padding));
}

在這個例子中，我們定義了一個全局變數 –main-padding，其值為 20px。隨後，在 .container 元素中，我們使用 calc() 將這個變數的值乘以 2 來設置內間距，並將其加到 50% 以設置左外間距。

使用這種方法，可以讓你的樣式表更具一致性和可維護性，尤其是當你需要在多處應用相同的計算邏輯時。

calc() 的運算規則

在使用 calc() 時，應該注意以下幾點：

• 空格必須存在：運算符號（如 +, -, *, /）兩邊必須留有空格。比如 calc(100% – 50px) 是正確的，而 calc(100%-50px) 是錯誤的。
• 不能省略單位：即使結果是 0，也不能省略單位，如 0px，而不是 0。
• 優先級：calc() 中的運算遵循標準的數學運算優先級規則，例如先乘除後加減。

結語

calc() 函數是一個非常強大的工具，它能讓你在設計網頁時更加靈活地控制元素的尺寸和間距。無論你是要處理百分比、像素還是其他單位的混合計算，calc() 都能派上用場。