CSS数据类型 <calc-constant> 定义可用于 CSS 计算的预定义数学常数，例如 e 和 pi。为方便起见，其中一些数学常数由 CSS 直接提供，帮助作者避免输入许多数字或手动计算它们。
可能的值
- e − 称为自然对数的数学常数，大约等于 2.7182818284590452354
- pi − 它表示圆的周长与其直径的比率。它大约等于 3.1415926535897932
- infinity & -infinity − 无限值。它显示最大或最小可能的值。
- NaN − 表示“非数字”规范大小写的值。
语法
<calc()> = e|pi|infinity|-infinity|NaN;
笔记
在 calc（） 中序列化参数时，它遵循浮点数学的 IEEE-754 标准，考虑涉及 infinity 和 NaN 等常数的情况。- 除以零时将返回无穷大值。根据 numerator 的值，它将是正无穷大或负无穷大。
- 如果你用任何东西加、减或乘无穷大，结果将是无穷大，除非你得到 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⁺）相乘或相除会得到负结果（0⁻ 或 -无穷大），但将 0⁻ 与负数相乘或除以会得到正结果。
除 NaN 外，所有常量均不区分大小写，因此 calc（Pi）、calc（E） 和 calc（InFiNiTy） 有效。
e
-e
E
pi
-pi
Pi
infinity
-infinity
InFiNiTy
NaN
-e
E
pi
-pi
Pi
infinity
-infinity
InFiNiTy
NaN
以下是所有无效的常量：
nan
Nan
NAN
Nan
NAN
CSS <calc-constant> - 在 calc（） 中使用 e 和 pi
以下示例演示了在 calc（） 中使用 e 进行指数旋转，并在 sin（） 函数中使用 pi −
<html>
<head>
<style>
.container {
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
.box {
display: flex;
flex-direction: column;
align-items: left;
width: 200px;
}
.box > div {
width: 100px;
height: 100px;
margin: 10px;
}
span {
font-family: monospace;
font-size: 0.8em;
}
.e-box {
background-color: red;
}
.pi-box {
background-color: red;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<label for="e-slider">e:</label>
<input type="range" min="0" max="5" step="0.01" value="0" class="e-slider" />
<span class="e-value"></span>
<div class="e-box"></div>
</div>
<div class="box">
<label for="pi-slider">pi:</label>
<input type="range" min="0" max="1" step="0.01" value="0" class="pi-slider" />
<span class="pi-value"></span>
<div class="pi-box"></div>
</div>
</div>
<script>
const eSliderElements = document.querySelectorAll(".e-slider");
const piSliderElements = document.querySelectorAll(".pi-slider");
const eValueElements = document.querySelectorAll(".e-value");
const piValueElements = document.querySelectorAll(".pi-value");
eSliderElements.forEach(function (eSlider, index) {
eSlider.addEventListener("input", function () {
document.querySelectorAll(".e-box")[index].style.transform = "rotate(calc(1deg * pow(" + this.value + ", e)))";
eValueElements[index].textContent = document.querySelectorAll(".e-box")[index].style.transform;
});
});
piSliderElements.forEach(function (piSlider, index) {
piSlider.addEventListener("input", function () {
document.querySelectorAll(".pi-box")[index].style.rotate = "calc(sin(" + this.value + " * pi) * 100deg)";
piValueElements[index].textContent = document.querySelectorAll(".pi-box")[index].style.rotate;
});
});
</script>
</body>
</html>
CSS <calc-constant> - 无穷大、NaN 和被零除
以下示例演示了除以零时计算的宽度值，以及在控制台中序列化时 calc（） 常量的显示方式 -
<html>
<head>
<style>
div {
height: 100px;
background-color: blue;
width: calc(1px / 0);
}
</style>
</head>
<body>
<div></div>
<script>
const divElement = document.querySelector("div");
document.write(divElement.offsetWidth); // infinity clamped to largest value for width
document.write("<br><br>");
// Function to set the width,
const logSerializedWidth = value => {
divElement.style.width = value; // Set the width of the div using the provided value
document.write(divElement.style.width); // Display the serialized width
document.write("<br><br>");
};
// Call the function with different calculations
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)
</script>
</body>
</html>
