CSS 數學函數

CSS 數學函數允許將數學表達式用作屬性值。本章將講解 calc()、max() 和 min() 函數。

calc() 函數

calc() 函數執行計算，并將結果用作屬性值。

CSS 語法

calc(expression)
值 描述
expression 必需。數學表達式。結果將用作值。可以使用以下運算符：+、-、*、/

讓我們看一個例子：

實例

使用 calc() 計算 <div> 元素的寬度：

#div1 {
  position: absolute;
  left: 50px;
  width: calc(100% - 100px);
  border: 1px solid black;
  background-color: yellow;
  padding: 5px;
}

親自試一試

max() 函數

max() 函數使用逗號分隔的值列表中的最大值作為屬性值。

CSS 語法

max(value1, value2, ...)
值 描述
value1, value2, ... 必需。逗號分隔的值列表 - 選擇最大的值。

讓我們看一個例子：

實例

使用 max() 將 #div1 的寬度設置為 50% 或 300px 中的較大值：

#div1 {
  background-color: yellow;
  height: 100px;
  width: max(50%, 300px);
}

親自試一試

min() 函數

min() 函數使用逗號分隔的值列表中的最小值作為屬性值。

CSS 語法

min(value1, value2, ...)
值 描述
value1, value2, ... 必需。一個逗號分隔的值列表——選擇最小的值

讓我們看一個例子：

實例

使用 min() 將 #div1 的寬度設置為 50% 或 300px 中的較小值：

#div1 {
  background-color: yellow;
  height: 100px;
  width: min(50%, 300px);
}

親自試一試

CSS 函數參考

如需所有 CSS 函數的完整列表，請訪問我們的 CSS 函數參考手冊。