Почему вычисляется (50% + 0) ошибка?
При тестировании некоторых новых макетов я обнаружил, что пишу в один момент
.test1 {width: calc(50% + 0);}
и, к моему удивлению, это не сработало.
Убедившись, что у меня нет опечатки, я был вынужден сделать вывод, что браузер отклонил это как ошибку. Тогда я подумал, что это был недостаток в браузере, с которым я тестировал, но другой ведет себя одинаково!
Так что же это за это выражение, что неправильно? Где ошибка?
p {border:2px solid green}
.test1 {width:calc(50% + 0);} /* wrong! */
.test2 {width:calc(50%);} /* OK */
.test3 {width:calc(50% + 0px);} /* also OK */
<p class="test1">test 1</p>
<p class="test2">test 2</p>
<p class="test3">test 3</p>
Ответы
Ответ 1
Это связано с Проверка типов
В + или -, убедитесь, что обе стороны имеют один и тот же тип, или что одна сторона является <number>, а другая - <integer>. Если обе стороны тот же тип, разрешение на этот тип. Если одна сторона является <number>, а другой - <integer>, разрешите <number>.
Если оператор не проходит вышеуказанные проверки, выражение инвалид.
Ваш текущий код имеет два значения, 50% - percentage, а 0 - integer/number. Он не подтверждает правила проверки типов.
Для комментария Poke:
Ссылка из Вычисленное значение
Если проценты не разрешены при вычисленном значении, это не разрешены в выражениях calc(), например. calc (100% - 100% + 1em) разрешает вычислять (0% + 1em), а не вычислять (1em). Если есть специальные правила вычисления процентов в значении (например, свойство высоты), они применяются всякий раз, когда выражение calc() содержит проценты.
Примечание. Таким образом, вычисленное значение выражения calc() может быть представленный либо как число, либо кортеж измерения, а процент.
Таким образом, можно сказать, что 50% + 10px является исключением для проверки типа и рассматривается в разделе вычисленного значения статьи.
Ответ 2
Это потому, что выражение (50% + 0) состоит из двух разных типов.
У вас может возникнуть соблазн подумать, что 50% - это процент, а 0 - целое число/число и не должен проверять правила проверки типов. Но это неверно. Не путайте его с помощью units. px, em, % - все units типа length dimension-token. Разрешены два разных units, но должны быть одного и того же type. Не допускаются два разных types.
W3C говорит об типах:
Математическое выражение имеет разрешенный тип, который является одним из <length>,
<frequency>, <angle>, <time>, <number>, or <integer>. Разрешенные тип должен быть действительным для места размещения; в противном случае выражение недопустимо. Разрешенный тип выражения определяемый типами содержащихся в нем значений. <number-token> являются типа <number> or <integer>. Тип A <dimension-token> задается формулой его единица (см <length>, deg - <angle> и т.д.).
Левая часть вашего выражения: 50%, 50px, or 50em - это all units типа length, которые <dimension-token> s, а правая часть вашего выражения: 0 - это тип integer, который является <number-token>.
Как упоминалось @Manoj , операторы + или - специально ограничивают операнды одинаковыми типа, то есть либо length или time или number-token s.
Позже в приведенном выше сообщении:
В + или - убедитесь, что обе стороны имеют один и тот же тип или одна сторона - это <number>, а другая - <integer>. Если обе стороны тот же тип, разрешить этот тип....
Суммарно
50% + 0px → Both are of the same type i.e. 'length
50% + 0 → Left is 'length' type and the right is 'integer' type.
Ответ 3
50% (в процентах) и 0 (Int) - это два разных типа данных, которые похожи на то, как целое число (Int) и строка различаются, оба должны быть одного типа для выполнения вычисления.
