CSS 数学函数

CSS 数学函数允许将数学表达式用作属性值。在这里，我们将解释calc(), max()和min()函数

calc() 函数

这个calc()函数执行计算以用作属性值。

calc( expression)

Value	Description
expression	Required. A mathematical expression. The result will be used as the value. The following operators can be used: + - * /

让我们看一个例子：

使用 calc() 计算 <div> 元素的宽度：

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

这个max()函数使用逗号分隔的值列表中的最大值作为属性值。

max( value1, value2, ...)

Value	Description
value1, value2, ...	Required. A list of comma-separated values - where the largest value is chosen

让我们看一个例子：

使用 max() 将 #div1 的宽度设置为最大的值，50% 或 300px：

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

这个min()函数使用逗号分隔的值列表中的最小值作为属性值。

min( value1, value2, ...)

Value	Description
value1, value2, ...	Required. A list of comma-separated values - where the smallest value is chosen

让我们看一个例子：

使用 min() 将 #div1 的宽度设置为最小的值，50% 或 300px：

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

Function	Description
calc()	Allows you to perform calculations to determine CSS property values
max()	Uses the largest value, from a comma-separated list of values, as the property value
min()	Uses the smallest value, from a comma-separated list of values, as the property value