Объясняя подход calc () к решению уравнений

Question

Я использую calc() для установки атрибута top: в классе. Мне нужна помощь в понимании того, как calc() используется - два уравнения, которые, я считаю, должны иметь одинаковый результат, не имеют. (Верхнее уравнение не практично, я просто пытаюсь отладить более крупную проблему и заметил, что эти два не имеют одинакового результата)

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

calc(-10px);

Answer 1

Первое уравнение неверно, потому что оно приведет к calc(-10px + 0)

Примечание. Поскольку <number-token> с всегда интерпретируются как <number> с или <integer> с, «безразмерный 0» <length> с не поддерживается в calc(). То есть width: calc(0 + 5px); недопустимо, хотя оба width: 0; и ширина: 5 пикселей; действительны. ^исх

И если результат был ненулевым, вы попадете в это:

В + или - убедитесь, что обе стороны имеют одинаковый тип , или что одна сторона - <number>, а другая - <integer>. Если обе стороны одного типа, разрешите этот тип. Если одна сторона - <number>, а другая - <integer>, разрешите <number>.

Последний вариант более логичен, поскольку 10px + 5 не имеет никакого значения, поэтому мы можем подумать, что 10px + 0 - это просто 10px, но для браузера это не так.