使用 CSS 数学函数

CSS 数学函数 允许将属性值（例如元素的 height、animation-duration 或 font-size）写成数学表达式。

在不使用任何数学的情况下，内置的 CSS 单位（如 rem、vw 和 %）通常足够灵活，可以为 HTML 元素设置样式以实现特定的用户体验。

但是，在某些情况下，我们可能会感到使用单个值和单位来表达元素的样式存在限制。请考虑以下示例

  1. 我们希望将内容区域的高度设置为“视窗高度减去导航栏高度”。
  2. 我们希望将两个元素的宽度加在一起以定义第三个元素的宽度。
  3. 我们希望阻止一些文本的可变 font-size 超过某个大小。

在所有这些情况下，我们都需要依赖数学来实现预期结果。一种解决方案可能是依赖 JavaScript 定义的数学函数，并根据脚本计算的结果动态设置元素样式。

在许多情况下，包括上述示例，我们可以直接使用内置于 CSS 中的数学函数。此解决方案通常比使用 JavaScript 更易于实现，并且浏览器执行速度更快。

总而言之，开发人员可以在他们的样式表中使用 近二十个 CSS 数学函数 的组合。在本指南中，我们将举例说明四个最常用的函数，并介绍更高级的函数。

calc(): 基本数学运算

在我们上面三个示例中的前两个示例中，我们希望根据加法或减法运算的结果设置元素的样式。这正是 calc() 的用例之一。

calc() 函数允许你使用加法、减法、乘法和除法 指定 CSS 属性值。它通常用于组合具有不同单位的两个 CSS 值，例如 % 和 px。

calc() 数学函数接受数学表达式作为参数，并返回该表达式的结果，例如：

css
property: calc(expression);

calc() 示例

单击下面的播放图标查看代码游乐场中的 calc() 示例，并亲自动手尝试。

css
div {
  background-color: black;
  margin: 4px 0;
  width: 100%;
}

div > code {
  display: block;
  background-color: red;
  color: white;
  height: 48px;
}

.calc1 > code {
  /* Output width: `110px` */
  width: calc(10px + 100px);
}

.calc2 > code {
  /* Output width: `10em` */
  width: calc(2em * 5);
}

.calc3 > code {
  /* Output width: Depends on the container's width */
  width: calc(100% - 32px);
}

.calc4 > code {
  --predefined-width: 100%;
  /* Output width: Depends on the container's width */
  width: calc(var(--predefined-width) - calc(16px * 2));
}

min(): 在一组值中查找最小值

在某些情况下，我们不希望 CSS 属性的值超过某个特定数字。例如，我们希望内容容器的宽度为“屏幕的全部宽度”和“500 像素”中的较小者。在这些情况下，我们可以使用 CSS 数学函数 min().

min() 数学函数以逗号分隔的值集作为参数，并返回这些值中最小的值，例如：

css
property: min(<first value>, <second value>, <third value>, ...);

此函数通常用于比较具有不同单位的两个 CSS 值，例如%和px。

min() 示例

单击下面的播放图标，在代码 playground 中查看min() 示例，并自己尝试一下。

css
div {
  background-color: black;
  margin: 4px 0;
  width: 100%;
}

div > code {
  display: block;
  background-color: darkblue;
  color: white;
  height: 48px;
}

.min1 > code {
  /* Output width: Depends on the container's width; */
  /* on this page, likely to be `50%` of the container's width */
  width: min(9999px, 50%);
}

.min2 > code {
  /* Output width: Depends on the container's width; */
  /* on this page, likely to be `100%` of the container's width */
  width: min(9999px, 100%);
}

.min3 > code {
  /* Output width: Depends on the container's width; */
  /* on this page, likely to be `120px` of the container's width */
  width: min(120px, 150px, 90%);
}

.min4 > code {
  /* Output width: Depends on the container's width; */
  /* on this page, likely to be `80px` of the container's width */
  width: min(80px, 90%);
}

max(): 在一组值中查找最大值

类似于min()，有时我们不希望 CSS 属性的值低于某个特定数字。例如，我们可能希望内容容器的宽度为“屏幕的全部宽度”和“500 像素”中的较大者。在这些情况下，我们可以使用 CSS 数学函数max()。

max() 数学函数将一组以逗号分隔的值作为参数，并返回这些值中最大的值，例如：

css
property: max(<first value>, <second value>, <third value>, ...);

此函数通常用于比较具有不同单位的两个 CSS 值，例如%和px。

请注意min()和max()示例之间的相似之处和差异。

max() 示例

单击下面的播放图标，在代码 playground 中查看max() 示例，并自己尝试一下。

css
div {
  background-color: black;
  margin: 4px 0;
  width: 100%;
  height: 48px;
}

div > code {
  display: block;
  background-color: darkmagenta;
  color: white;
  height: 48px;
}

.max1 > code {
  /* Output width: Depends on the container's width; */
  /* on this page, likely to be `50%` of the container's width */
  width: max(50px, 50%);
}

.max2 > code {
  /* Output width: Depends on the container's width; */
  /* on this page, likely to be `100%` of the container's width */
  width: max(50px, 100%);
}

.max3 > code {
  /* Output width: Depends on the container's width; */
  /* on this page, likely to be `90%` of the container's width */
  width: max(20px, 50px, 90%);
}

.max4 > code {
  /* Output width: Depends on the container's width; */
  /* on this page, likely to be `80%` of the container's width */
  width: max(80px, 80%);
}

clamp(): 将值限制在两个值之间

我们可以通过使用clamp()来结合min()和max()的功能。clamp()数学函数将最小值、要夹紧的值和最大值作为参数，例如：

css
property: clamp(<minimum value>, <value to be clamped>, <maximum value>);
  • 如果要夹紧的值小于传递的最小值，则函数将返回最小值。
  • 如果要夹紧的值大于传递的最大值，则函数将返回最大值。
  • 如果要夹紧的值介于传递的最小值和最大值之间，则函数将返回要夹紧的原始值。

此函数通常用于比较具有不同单位的两个 CSS 值，例如%和px。

clamp() 示例

单击下面的播放图标，在代码 playground 中查看clamp() 示例，并自己尝试一下。

css
div {
  background-color: black;
  margin: 4px 0;
  width: 100%;
  height: 48px;
}

div > code {
  display: block;
  background-color: darkgreen;
  color: white;
  height: 48px;
}

.clamp1 > code {
  /* Output width: Depends on the container's width; */
  /* on this page, likely to be `20%` of the container's width */
  width: clamp(20%, 1px, 80%);
}

.clamp2 > code {
  /* Output width: Depends on the container's width; */
  /* on this page, likely to be `90%` of the container's width */
  width: clamp(10%, 9999px, 90%);
}

.clamp3 > code {
  /* Output width: `125px` */
  width: clamp(125px, 1px, 250px);
}

.clamp4 > code {
  /* Output width: `150px` */
  width: clamp(25px, 9999px, 150px);
}

高级 CSS 数学函数

在布局和设置 DOM 元素的样式时，四个基本数学函数calc()、min()、max()和clamp()通常就足够了。但是，对于高级用途，如数学学习材料、3D 可视化或 CSS 动画，您可能需要考虑使用

  • 分步值函数
    • round()：根据舍入策略计算值
    • mod()：计算除法运算的余数，其符号与除数相同
    • rem()：计算除法运算的余数，其符号与被除数相同
  • 三角函数
    • sin()：计算数字的三角正弦
    • cos()：计算数字的三角余弦
    • tan()：计算数字的三角正切
    • asin()：计算数字的三角反正弦
    • acos()：计算数字的三角反余弦
    • atan()：计算数字的三角反正切
    • atan2()：根据两个数字计算三角反正切
  • 指数函数
    • pow()：计算一个数字乘以另一个数字的幂
    • sqrt()：计算数字的平方根
    • hypot()：计算给定数字的平方和的平方根
    • log()：计算数字的对数（e 为默认底数）
    • exp()：计算e 乘以另一个数字的幂
  • 符号函数
    • abs()：计算数字的绝对值
    • sign()：计算数字的符号（正、负或零）

最后的想法

  • 您可以使用 CSS 数学函数来创建响应式用户界面，而无需编写任何 JavaScript 代码。
  • CSS 数学函数有时可以代替CSS 媒体查询来定义布局断点。
  • 在 2023 年，Interop 项目的成员选择“CSS 数学函数”作为改进的重点领域。这意味着浏览器供应商正在共同努力，确保 CSS 数学函数在所有浏览器和设备上的执行结果相同。