Почему calc(100%-100px) в CSS не работает без пробелов?

внешний интерфейс CSS
Почему calc(100%-100px) в CSS не работает без пробелов?

«Это первый день моего участия в первом испытании обновлений 2022 года. Подробную информацию о мероприятии см.:Вызов первого обновления 2022 г.".

Причина проблемы

Когда я снова использовал calc сегодня, я обнаружил, что он не может работать.Мой метод записи:

  width: calc(100%-100px);

Страница не имеет эффекта. После добавления пробела оказывается эффективным:

  width: calc(100% - 100px);

Есть миллиарды сомнений, почему это?

что такое кальк?

Вычисляемое свойство css3, используемое для динамического вычисления значения длины. синтаксис расчета:

calc(expression)//expression是数学表达式

Использование и определение

    • Должен быть пробел до и после оператора, например:width: calc(100% - 100px);
    • Любое значение длины может быть вычислено с помощью функции calc();
    • Функция calc() поддерживает операции "+", "-", "*", "/";
    • Функция calc() использует стандартные математические правила приоритета;

Сначала разберитесь с основным синтаксисом и типами данных в CSS:

Ссылки на документацию》》

Здесь в документации должен быть основной синтаксис здесь:

stylesheet  : [ CDO | CDC | S | statement ]*;
statement   : ruleset | at-rule;
at-rule     : ATKEYWORD S* any* [ block | ';' S* ];
block       : '{' S* [ any | block | ATKEYWORD S* | ';' S* ]* '}' S*;
ruleset     : selector? '{' S* declaration? [ ';' S* declaration? ]* '}' S*;
selector    : any+;
declaration : property S* ':' S* value;
property    : IDENT;
value       : [ any | block | ATKEYWORD S* ]+;
any         : [ IDENT | NUMBER | PERCENTAGE | DIMENSION | STRING
              | DELIM | URI | HASH | UNICODE-RANGE | INCLUDES
              | DASHMATCH | ':' | FUNCTION S* [any|unused]* ')'
              | '(' S* [any|unused]* ')' | '[' S* [any|unused]* ']'
              ] S*;
unused      : block | ATKEYWORD S* | ';' S* | CDO S* | CDC S*;

Синтаксис DIMENSION находится сверху:

DIMENSION    {num}{ident}

num должно быть числом, переверните определение ident:

в начале второго абзаца 4.1.1

ident    [-]?{nmstart}{nmchar}*

Различия между nmstart и nmchar:

nmstart [_a-z]|{nonascii}|{escape}

nmchar [_a-z0-9-]|{nonascii}|{escape}

Разобрать расчет(100%-100px)

Вместо парсера давайте разберем calc(100%-100px). Сначала просмотрите синтаксис DIMENSION, {num}{ident} разделит его на num: 100, ident: %-100px.

Почему «%-100px»?

На самом деле это должны быть «%» и «-100px», оба из которых анализируются как единицы. (Это то, на что я не обратил внимания, когда писал статью раньше, я запомнил % как букву.) Поскольку «-100px» соответствует синтаксису nmchar, он не разбивается. Если в «-100px» есть пробел, он будет разделен на «-», «100» и «px». Но этот пример может только лучше объяснить, почему после «-» добавляется пробел. Почему перед ним пробел?

привести к новым примерам

Здесь представлен новый пример:

 width: calc(100px-100px);

Во время компиляции он будет напрямую разделен на «100» и «px-100px», а «px-100px» будет передан nmchar точно в «[_a-z0-9-]». Оставьте его проанализированным как единицу. Но «px-100px» не принадлежит ни одной единице измерения в CSS, и определения единицы измерения нет.

(В этом случае будет лучше объяснено, почему требуются пробелы до и после «-».)

Если перед и после «-» есть пробел, он будет разделен на «100px» (число 100 и единица пикселей), «-», «100px» (число 100 и единица пикселей) для анализа.

Почему написан исходный код?

Зачем ставить "-"? Почему мы не можем написать calc(100%-100px) или calc(100px-100px)?

Здесь вводится понятие положительных и отрицательных чисел, потому что среди математических идентификаторов есть два идентификатора, положительный и отрицательный. Просто взглянув на вторую половину calc(100%-100px) и calc(100px-100px), «-100px» здесь больше похоже на «-100» и «px». Поскольку в CSS существует понятие отрицательных чисел, так же как и поля и отступы, часто используются отрицательные числа. Представляем новый пример:

 width: calc(500px - -100px);

Что мне делать, если я снова столкнусь с этой ситуацией?

Если нет определения для знака минус, это должно быть «500 пикселей», «-», «-», «100 пикселей», как скомпилировать два знака минус. Поэтому добавьте пробелы до и после «-», чтобы отличить вычитание от отрицательных знаков. (Конечно, это личное понимание, а не официальное объяснение)

Категории