<calc-keyword>

<calc-keyword> CSS 数据类型代表着诸如 e 和 pi 之类的明确定义的常量。为了避免让作者手动输入这些数学常量的几位数字或计算它们，CSS 直接提供了其中的一些常量，方便使用。

语法

<calc-keyword> 类型定义了可以在 CSS 数学函数中使用的数值常量。

Values

e: 自然对数的底数，大约等于 2.7182818284590452354。
pi: 圆周长与其直径的比值，大约等于 3.1415926535897932。
infinity & -infinity: 无限值，用于表示可能的最大值/最小值。
NaN: 表示“非数字”的规范大小写值。

Notes

在 calc() 中序列化参数遵循 IEEE-754 浮点数数学标准，这意味着需要注意关于 infinity 和 NaN 之类的常量的几个情况。

除以零将返回正或负 infinity，具体取决于分子的符号。
将 infinity 加、减或乘以任何东西都将返回 infinity，除非它产生 NaN（见下文）。
任何至少包含一个 NaN 参数的操作都将返回 NaN。这意味着 0 / 0、infinity / infinity、0 * infinity、infinity + (-infinity) 和 infinity - infinity 都将返回 NaN。
正负零是可能的值 (0⁺ 和 0⁻)。这有以下影响。
- 产生零且恰好包含一个负参数的乘法或除法 (-5 * 0 或 1 / (-infinity)) 或其他数学函数中的组合产生的负结果将返回 0⁻。
- 0⁻ + 0⁻ 或 0⁻ - 0 将返回 0⁻。所有其他会产生零的加法或减法将返回 0⁺。
- 将 0⁻ 乘以或除以正数（包括 0⁺）将返回负结果（0⁻ 或 -infinity），而将 0⁻ 乘以或除以负数将返回正结果。

这些规则的应用示例在 Infinity、NaN 和除以零部分中展示。

注意： 在 calc() 中很少需要使用 infinity 作为参数，但它可以用来避免硬编码的“魔法数字”或确保某个值始终大于另一个值。如果你需要明确地让某个属性具有该数据类型“可能的最大值”，它可能会有用。

Formal syntax

<calc-keyword> = 
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN

描述

数学常量只能在 CSS 数学函数中用于计算。数学常量不是 CSS 关键字，但如果它们在计算之外使用，则会被视为任何其他关键字。例如

animation-name: pi; 指的是名为“pi”的动画，而不是 pi 数值常量。
line-height: e; 无效，但 line-height: calc(e); 有效。
rotate(1rad * pi); 不会起作用，因为 rotate() 不是数学函数。使用 rotate(calc(1rad * pi));

在数学函数中，<calc-keyword> 值被评估为 <number> 值，因此 e 和 pi 充当数值常量。

infinity 和 NaN 都是略微不同的退化数值常量。虽然它们在技术上不是数字，但它们充当 <number> 值，因此要获得无限的 <length>，例如，需要像 calc(infinity * 1px) 这样的表达式。

infinity 和 NaN 值主要包含在内是为了使序列化更简单和更明显，但可以用作表示“最大可能值”，因为无限值被钳制到允许的范围内。这种情况很少合理，但在使用 infinity 时，它比在样式表中放置一个巨大的数字或硬编码魔数简单得多。

所有常量都区分大小写，除了 NaN，这使得 calc(Pi)、calc(E) 和 calc(InFiNiTy) 有效。

e
-e
E
pi
-pi
Pi
infinity
-infinity
InFiNiTy
NaN

以下都是无效的

nan
Nan
NAN

示例

在 `calc()` 中使用 e 和 pi

以下示例展示了如何在 calc() 中使用 e 来旋转一个元素，使其角度呈指数增长。第二个框显示了如何在 sin() 函数中使用 pi。

#wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: left;
  width: 200px;
}
.container > div {
  width: 100px;
  height: 100px;
  margin: 10px;
}

span {
  font-family: monospace;
  font-size: 0.8em;
}

#e {
  background-color: blue;
}

#pi {
  background-color: blue;
}

html

<div id="wrapper">
  <div class="container">
    <div id="e"></div>
    <input type="range" min="0" max="7" step="0.01" value="0" id="e-slider" />
    <label for="e-slider">e:</label>
    <span id="e-value"></span>
  </div>
  <div class="container">
    <div id="pi"></div>
    <input type="range" min="0" max="1" step="0.01" value="0" id="pi-slider" />
    <label for="pi-slider">pi:</label>
    <span id="pi-value"></span>
  </div>
</div>

// sliders
const eInput = document.querySelector("#e-slider");
const piInput = document.querySelector("#pi-slider");
// spans for displaying values
const eValue = document.querySelector("#e-value");
const piValue = document.querySelector("#pi-value");

eInput.addEventListener("input", function () {
  e.style.transform = "rotate(calc(1deg * pow(" + this.value + ", e)))";
  eValue.textContent = e.style.transform;
});

piInput.addEventListener("input", function () {
  pi.style.rotate = "calc(sin(" + this.value + " * pi) * 100deg)";
  piValue.textContent = pi.style.rotate;
});

无穷大、NaN 和除以零

以下示例显示了在除以零时 width 属性的计算值，以及在控制台中查看不同 calc() 常量序列化后的结果。

html

<div></div>

css

div {
  height: 50px;
  background-color: red;
  width: calc(1px / 0);
}

const div = document.querySelector("div");
console.log(div.offsetWidth); // 17895698 (infinity clamped to largest value for width)

function logSerializedWidth(value) {
  div.style.width = value;
  console.log(div.style.width);
}

logSerializedWidth("calc(1px / 0)"); // calc(infinity * 1px)
logSerializedWidth("calc(1px / -0)"); // calc(-infinity * 1px)

logSerializedWidth("calc(1px * -infinity * -infinity)"); // calc(infinity * 1px)
logSerializedWidth("calc(1px * -infinity * infinity)"); // calc(-infinity * 1px)

logSerializedWidth("calc(1px * (NaN + 1))"); // calc(NaN * 1px)

规范

未找到规范

未找到 css.types.calc-keyword 的规范数据。
检查此页面是否存在问题或贡献缺少的 spec_url 到 mdn/browser-compat-data。还要确保规范已包含在 w3c/browser-specs.

浏览器兼容性

BCD 表只在浏览器中加载

参见

<calc-sum>
<calc-product>
<calc-value>