CSS 数据类型 - <calc-constant>

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）的情况。

除以零时将返回无限值。根据分子的值，它将是正无穷大或负无穷大。
如果将无穷大与任何东西相加、相减或相乘，结果将是无穷大，除非得到 NaN。
任何包含至少一个 NaN 参数的操作，例如 0/0、infinity/infinity、0*infinity、infinity + (-infinity) 和 infinity - infinity，都将导致 NaN。
可能的值包括正零和负零 (0⁺ 和 0⁻)。这会导致以下效果
- 乘法或除法结果为 0，且只有一个负参数（例如，-5 * 0 或 1 / (-infinity)），或者其他数学函数的负结果将导致 0⁻。
- 0⁻ + 0⁻ 或 0⁻ - 0 将导致 0⁻。任何结果为零的加法或减法都将导致 0⁺。
- 将 0⁻ 与正数（包括 0⁺）相乘或相除会导致负结果（0⁻ 或 -infinity），但将 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);    // 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>

打印页面