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 标准，考虑涉及常量的情况，例如如无穷大和 NaN。
除以零时将返回无穷大值。根据分子的值，它可以是正无穷大或负无穷大。
如果将无穷大与任何值相加、相减或相乘，结果将是无穷大，除非您得到NaN。
任何至少包含一个 NaN 参数的运算，例如 0/0、无穷大/无穷大、0*无穷大、无穷大 + (-无穷大) 和无穷大 -无穷大，将导致 NaN。
可能的值包括正零和负零（0⁺ 和 0⁻）。这会导致以下效果:
带有单个负参数的乘法或除法结果为 0（例如，-5 * 0 或 1 / (-无穷大)）或其他数学函数的负结果将导致 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 以下均为无效常量:
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); //无穷大到宽度的最大值
document.write("<br><br>");
//设置宽度的函数
const logSerializedWidth = value => {
divElement.style.width = value; //使用提供的值设置div的宽度
document.write(divElement.style.width); //显示序列化宽度
document.write("<br><br>");
};
//调用不同计算的函数
logSerializedWidth("calc(1px / 0)"); // calc(无穷大 * 1px)
logSerializedWidth("calc(1px / -0)"); // calc(-无穷大 * 1px)
logSerializedWidth("calc(1px -infinity -infinity)"); // calc(无穷大 * 1px)
logSerializedWidth("calc(1px -infinity infinity)"); // calc(-无穷大 * 1px)
logSerializedWidth("calc(1px (NaN + 1))"); // calc(NaN 1px)
</script>
</body>
</html>