前端必知必会-CSS数学函数

---

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 数学函数

函数	描述
calc()	允许您执行计算以确定 CSS 属性值
max()	使用逗号分隔的值列表中的最大值作为属性值
min()	使用逗号分隔的值列表中的最小值作为属性值

---

总结

本文介绍了CSS数学函数的使用，如有问题欢迎私信和评论