Explaining calc()'s approach to solving equations

问题

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);

回答1:

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

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:

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>.

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.

来源：https://stackoverflow.com/questions/55406001/explaining-calcs-approach-to-solving-equations