为什么在等式中使用 0 时 css-calc() 不起作用？

Question

我正在使用calc() 在类中设置top: 属性。我需要一些帮助来理解calc() 的使用方式——我认为两个方程应该有相同的结果。 （上面的等式不实用，我只是想调试一个更大的问题，发现这两个没有相同的结果）

calc(-10px + ((1 - 1) * 0));

calc(-10px);

Answer 1

第一个等式无效，因为它会导致calc(-10px + 0)

注意：因为<number-token>s 总是被解释为<number>s 或<integer>s，所以calc() 不支持“无单位0”<length>s。即 width:calc(0 + 5px); 是无效的，即使两者都是 width: 0;和宽度：5px；是有效的。 ^ref

如果结果不为零，您将陷入：

在 + 或 - 处，检查两边的类型是否相同，或者一侧是 <number>，另一侧是 <integer>。如果双方是同一类型，则解析为该类型。如果一侧是<number>，另一侧是<integer>，则解析为<number>。

最后一个更合乎逻辑，因为10px + 5 没有任何意义，我们可能认为10px + 0 只是10px，但对于浏览器来说不是。