CSS 数学函数
CSS 数学函数允许使用数学表达式作为属性值。在这里，我们将解释 calc()、 max() 和 min() 函数。
calc() 函数
calc() 函数执行一个计算，该计算将用作属性值。
CSS 语法
calc(表达式)
| 值 | 描述 |
|---|---|
| 表达式 | 必需。一个数学表达式。结果将用作值。 可以使用以下运算符：+ - * / |
让我们看一个例子
示例
使用 calc() 计算 <div> 元素的宽度
#div1 {
position: absolute;
left: 50px;
width: calc(100% - 100px);
border: 1px solid black;
background-color: yellow;
padding: 5px;
}
尝试一下 »
max() 函数
max() 函数使用来自逗号分隔值列表的最大值作为属性值。
CSS 语法
max(值1, 值2, ...)
| 值 | 描述 |
|---|---|
| 值1, 值2, ... | 必需。一个逗号分隔的值列表，选择其中最大的值 |
让我们看一个例子
示例
使用 max() 将 #div1 的宽度设置为 50% 或 300px 中较大的一个
#div1 {
background-color: yellow;
height: 100px;
width: max(50%, 300px);
}
尝试一下 »
min() 函数
min() 函数使用来自逗号分隔值列表的最小值作为属性值。
CSS 语法
min(值1, 值2, ...)
| 值 | 描述 |
|---|---|
| 值1, 值2, ... | 必需。一个逗号分隔的值列表，选择其中最小的值 |
让我们看一个例子
示例
使用 min() 将 #div1 的宽度设置为 50% 或 300px 中较小的一个
#div1 {
background-color: yellow;
height: 100px;
width: min(50%, 300px);
}
尝试一下 »
所有 CSS 数学函数
| 函数 | 描述 |
|---|---|
| calc() | 允许您执行计算以确定 CSS 属性值 |
| max() | 使用从逗号分隔的值列表中最大的值作为属性值 |
| min() | 使用从逗号分隔的值列表中最小的值作为属性值 |
