CSS 数学函数允许数学表达式 用作属性值。在这里,我们将解释calc()
, max()
和 min()
函数。
calc()
函数calc()
函数执行计算以用作属性值。
calc(expression)
必需的。一个数学表达式。结果将用作值。
可以使用以下运算符:+ - * /
让我们看一个例子:
使用 calc() 计算 <div> 元素的宽度:
#div1 {
position: absolute;
left: 50px;
width: calc(100% - 100px);
border: 1px solid black;
background-color: yellow;
padding: 5px;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
position: absolute;
left: 50px;
width: calc(100% - 100px);
border: 1px solid black;
background-color: yellow;
padding: 5px;
}
</style>
</head>
<body>
<h1>The calc() Function</h1>
<p>Create a div that stretches across the window, with a 50px gap between both sides of the div and the edges of the window:</p>
<div id="div1">Some text...</div>
</body>
</html>
max()
函数max()
函数使用最大值, 来自以逗号分隔的值列表,作为属性值。
max(value1, value2, ...)
必需的。以逗号分隔的值列表 - 其中最大值是 选择的
让我们看一个例子:
使用 max() 将 #div1 的宽度设置为最大的值,50% 或 300 像素:
#div1 {
background-color: yellow;
height: 100px;
width: max(50%, 300px);
}
自己尝试一下→
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
background-color: yellow;
height: 100px;
width: max(50%, 300px);
}
</style>
</head>
<body>
<h1>The max() Function</h1>
<p>Use max() to set the width of #div1 to whichever value is largest, 50% or 300px:</p>
<div id="div1">Some text...</div>
<p>Resize the browser window to see the effect.</p>
</body>
</html>
min()
函数min()
函数使用最小值, 来自以逗号分隔的值列表,作为属性值。
min(value1, value2, ...)
必需的。以逗号分隔的值列表 - 其中最小值是 选择的
让我们看一个例子:
使用 min() 将 #div1 的宽度设置为最小的值,50% 或 300 像素:
#div1 {
background-color: yellow;
height: 100px;
width: min(50%, 300px);
}
自己尝试一下→
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
background-color: yellow;
height: 100px;
width: min(50%, 300px);
}
</style>
</head>
<body>
<h1>The min() Function</h1>
<p>Use min() to set the width of #div1 to whichever value is smallest, 50% or 300px:</p>
<div id="div1">Some text...</div>
<p>Resize the browser window to see the effect.</p>
</body>
</html>
允许您执行计算以确定 CSS 属性值
使用逗号分隔的值列表中的最大值作为 适当的价值
使用逗号分隔的值列表中的最小值作为 适当的价值