學習如何使用 CSS 的 calc() 函式

calc() 函式可以讓您對數值進行基本的數學運算，尤其在需要將長度值加減百分比時非常有用。

以下是它的工作方式：

div {
 max-width: calc(80% - 100px)
}

它會返回一個長度值，因此可以在任何需要像素值的地方使用。

您可以進行以下運算：

  • 使用 + 進行加法
  • 使用 - 進行減法
  • 使用 * 進行乘法
  • 使用 / 進行除法

注意：在進行加法和減法時，運算符號周圍的空格是必需的，否則它將不按預期工作。

範例：

div {
 max-width: calc(50% / 3)
}

div {
 max-width: calc(50% + 3px)
}