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;
}   

自己尝试一下 →

<!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() 函数使用最大值, 来自以逗号分隔的值列表,作为属性值。

CSS 语法

 max(value1, value2, ...)
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() 函数使用最小值, 来自以逗号分隔的值列表,作为属性值。

CSS 语法

 min(value1, value2, ...)
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 数学函数

calc()

允许您执行计算以确定 CSS 属性值

max()

使用逗号分隔的值列表中的最大值作为 适当的价值

min()

使用逗号分隔的值列表中的最小值作为 适当的价值