手册
目录
收藏456
分享
阅读1042
更新时间2025-07-16
calc() 函数执行计算，并将结果用作属性值。
calc(expression)
| 值 | 描述 |
|---|---|
| expression | 必需。数学表达式。结果将用作值。可以使用以下运算符：+、-、*、/ |
让我们看一个例子：
使用 calc() 计算
#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);
}
运行实例 »点击 "运行实例" 按钮查看在线实例
如需所有 CSS 函数的完整列表，请访问我们的 CSS 函数参考手册。
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
精选课程
共5课时
17.2万人学习
共49课时
77万人学习
共29课时
61.7万人学习
共25课时
39.3万人学习
共43课时
70.9万人学习
共25课时
61.6万人学习
共22课时
23万人学习
共28课时
33.9万人学习
共89课时
125万人学习
