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% 或 300像素：

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

尝试一下 »

min（） 函数

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

CSS 语法

min(value1, value2, …)

参数	说明
value1, value2, …	必填。逗号分隔值列表 - 选择最小值的位置

让我们看一个例子：

使用 min（） 将 #div1 的宽度设置为最小的值，50% 或 300像素：

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

尝试一下 »

所有 CSS 数学函数

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