一个神奇的变量！CSS 中的 infinity：无限可能？

大家好，我是前端宝哥。

最近发现 CSS 中居然有 infinity 这个神奇的常量，感觉脑洞大开，各种奇思妙想都涌现出来了！ 🤔 来，咱们一起研究一下，看看它除了“无限可能”之外，还能带来哪些实际应用吧。

小贴士：infinity 只能在 calc() 函数里使用哦。

永不败北的 z-index 之战

你有没有遇到过这种情况： 你想要一个元素永远在最上面，结果 z-index 数字越改越大，像是在跟谁比谁更大一样？

现在，这场“军备竞赛”可以结束了！使用 infinity 来设置 z-index，就能获得最高的层级，永远战无不胜！

看这个例子，无论你给蓝色卡片设置什么 z-index，它都无法盖过紫色卡片，因为紫色卡片使用了 z-index: calc(infinity)。 试试看！

最大的元素

你试过创建 width 和 height 都为 infinity 像素的 `

.big {
  width: calc(infinity * 1px);
  height: calc(infinity * 1px);
}

别忘了，我们用 1px 乘以 infinity 来把它变成像素长度。

看看这个演示，你就能看到效果了。 我还在代码里加了一些输出，方便我们更直观地了解浏览器发生了什么：

• getComputedStyle() 显示的是 CSS 属性解析后的结果。

• getBoundingClientRect() 显示的是渲染后元素在视窗中的实际大小。

// getComputedStyle()
const computed = window.getComputedStyle(bigEl);
const computedWidth = computed.getPropertyValue('width');
const computedHeight = computed.getPropertyValue('height');

// getBoundingRect()
const rect = bigEl.getBoundingClientRect();
const rectWidth = rect.width + 'px';
const rectHeight = rect.height + 'px';

其实，CSS 中的 infinity 并不是真正的无限大，它只是个超级大的数字而已。 😂 我的失望程度可比 CSS 中的 infinity 大多了！

在我的电脑（Windows 系统，用 Chrome 浏览器）上，演示中的 

不同的无限？

等等，我刚才说的是“我的电脑”， 因为 infinity 在不同的浏览器和操作系统上，解析出来的值可能是不一样的！

看这个例子：

• macOS 上的 Chrome 浏览器，width 和 height 都显示为 16,777,214px， 只有 Windows 上的一半。

• Firefox 用 getComputedStyle() 显示的 width 是 1.78957e+7px， 用 getBoundingRect() 显示的 width 则是 8,947,849px。

• 更奇葩的是，Firefox 甚至不解析 height: calc(infinity * 1px)， 直接忽略了！ 但是，如果你把 height 设置为 17895697px （Firefox 允许的最大 CSS 长度）， 它就能正常显示。 我也不知道为什么 Firefox 处理 height 和 width 的方式不一样。

更让人惊讶的是， infinity 解析出来的值还可能取决于你使用它的 CSS 属性。还记得之前那个 z-index 的例子吗？ infinity 的值是 2,147,483,647， 在我的所有测试浏览器中都是一样的，但这跟我们刚刚看到的 width 和 height 的值不一样。

这些奇奇怪怪的 infinity 值并不是随机生成的，而是跟数字的存储方式有关。例如， 2,147,483,647 就是 2^31 - 1， 是带符号 32 位整数的最大值。

动画到无限

如果让一个元素动画到 infinity 会怎么样？ 比如这样：

.interstellar {
  animation: go 10s;
}

@keyframes go {
  to { translate: calc(infinity * 1px); }
}

结果是，元素会立刻跳到动画的最后，并在接下来的 10 秒内一直保持在这个位置。 也就是说，元素会尽可能地向右移动，然后就停在那里不动了。

这很合理，因为通往无限的路上没有增量值，无限的几分之一还是无限。 所以在动画的每一帧中，动画值都是无限的。

如果设置无限的 animation-delay 呢？

.interstellar {
  animation-delay: calc(infinity * 1s);
}

你猜对了！ 动画永远不会开始。

实际应用

你会在你的 CSS 中真正使用 infinity 吗？ 也许你会！ 有时候，你只需要一个非常大的值，infinity 就可以帮到你。

比如，你可以使用 border-radius 创建一个圆角形状， border-radius 的值可以是像素单位，也可以是百分比。如果你的元素大小会发生变化，使用一个比你需要的更大的值，并不会改变形状，反而是一个不错的选择。

div {
  border-radius: calc(infinity * 1px);
}

另一个可能的应用是使用 常见的 CSS 代码片段， 通过将内容放置在页面边缘，使其“仅供屏幕阅读器使用”。

.screen-reader-only {
  position: absolute;
  left: calc(infinity * -1px);

  /* 以及其他一些东西 */
}

但是，infinity 真的比像 9999px 这样任意大的值更好吗？ 在功能上，它们其实没有区别，结果是一样的。但我认为使用 infinity 可以使代码更具自解释性，因为它明确表达了我们的意图，就是想要一个非常大的值，而不是一个具体的数字。

除以零和负无穷

除以零会得到 infinity， 也就是说，calc(1 / 0) 和 calc(infinity) 的结果是一样的。 这在单位上也适用。 所以你可以写 calc(1px / 0)， 它和 calc(infinity * 1px) 的值一样。

这个知识点挺有意思，不过我会直接用 infinity ， 这样 CSS 代码更清晰。

还有一个 -infinity 常量，它会给你最小的可能值。 不用多说，它和 infinity 乘以 -1 是一样的。

总结

简单来说，CSS infinity 就是表示一个特定情况下最大可能值的简写。 这个值在不同的浏览器、操作系统和 CSS 属性之间可能会有所不同。

是否使用 infinity 取决于你。 现在主流浏览器对 infinity 的支持都 还不错， 它可以帮助你写出更清晰易懂的 CSS 代码， 但也不是必须的。

---

最后，如果你觉得宝哥的分享还算实在，就给我点个赞，关注一波。分享出去，也许你的转发能给别人带来一点启发。

关注我，明天见！