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 等常数的情况。
  • 除以零时将返回无穷大值。根据 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

以下是所有无效的常量：

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>
打印本页
上一页
下一页