CSS calc() 函式

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

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

以下是它的工作方式：

1
2
3

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

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

您可以進行以下運算：

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

範例：

1
2
3

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

1
2
3

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

tags: [“CSS”, “calc()”, “web development”]