手册
目录
收藏641
分享
阅读4397
更新时间2025-07-16
前言：
CSS 数学函数允许在属性值中使用数学表达式。在本文中，我们将介绍 `calc()`、`max()` 和 `min()` 这三个函数的用法。
calc() 函数用于执行一个计算，并将计算结果作为属性值使用。
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(*value1*, *value2*, ...)| 值 | 描述 |
|---|---|
| *value1*, *value2*, ... | 必需参数。一组以逗号分隔的值，从中选择最大的一个作为属性值。 |
让我们来看一个示例：
使用 max() 将 #div1 的宽度设置为 50% 或 300px 中较大的那个值：
#div1 {
background-color: yellow;
height: 100px;
width: max(50%, 300px);
}运行实例 » 点击 "运行实例" 按钮查看在线示例
min() 函数用于从一组以逗号分隔的值中选择最小的一个，作为属性值使用。
min(*value1*, *value2*, ...)| 值 | 描述 |
|---|---|
| *value1*, *value2*, ... | 必需参数。一组以逗号分隔的值，从中选择最小的一个作为属性值。 |
让我们来看一个示例：
使用 min() 将 #div1 的宽度设置为 50% 或 300px 中较小的那个值：
#div1 {
background-color: yellow;
height: 100px;
width: min(50%, 300px);
}运行实例 » 点击 "运行实例" 按钮查看在线示例
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
9
精选课程
共5课时
17.3万人学习
共49课时
77.9万人学习
共29课时
62.3万人学习
共25课时
39.7万人学习
共43课时
73.6万人学习
共25课时
62.2万人学习
共22课时
23.2万人学习
共28课时
34.4万人学习
共89课时
127万人学习
