在方程式内部使用0时，css-calc()为什么不起作用? [英] Why doesn't css-calc() work when using 0 inside the equation?

问题描述

我正在使用calc()在类中设置top:属性.我需要一些帮助来理解calc()的用法-我认为两个方程应该得到相同的结果，但是不会. (最主要的方程式不切实际，我只是尝试调试一个更大的问题，并注意到这两个结果不相同)

I'm using calc() to set the top: attribute in a class. I need some help understanding how calc() gets used - two equations I believe should have the same result don't. (The top equation isn't practical, I'm just trying to debug a larger issue and noticed these two don't have the same result)

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

calc(-10px);

推荐答案

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

The first equation is invalid because it will lead to calc(-10px + 0)

注意:由于<number-token>始终被解释为<number>或<integer>，因此calc()中不支持无单位0" <length>.也就是说，即使宽度:0;宽度:calc(0 + 5px);也是无效的.宽度:5px；是有效的. ^参考

Note: Because <number-token>s are always interpreted as <number>s or <integer>s, "unitless 0" <length>s aren’t supported in calc(). That is, width: calc(0 + 5px); is invalid, even though both width: 0; and width: 5px; are valid. ^ref

如果结果不为零，则您将陷入:

And if the result was non-zero you will fall into this:

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

At + or -, check that both sides have the same type, or that one side is a <number> and the other is an <integer>. If both sides are the same type, resolve to that type. If one side is a <number> and the other is an <integer>, resolve to <number>.

最后一个更具逻辑性，因为10px + 5没有任何意义，我们可能会认为10px + 0只是10px，但对于浏览器却不是.

The last one is more logical since 10px + 5 has no meaning whearas we may think that 10px + 0 is simply 10px but for the browser it's not.

这篇关于在方程式内部使用0时，css-calc()为什么不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！