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 函数参考手册。