为什么在Calc（）方法中必须用空格包围+或 - ？ [英] Why must a + or - be surrounded with whitespace from within the Calc() method?
问题描述
最近我开始在CSS中使用calc（...）方法。我很快知道，代码如： width：calc（100％-2）将无法工作，虽然在 运算符将解决这个问题，并且calc方法将正常工作。
Recently I've started using the calc(...) method within CSS. I quickly learned that code such as: width: calc(100%-2) will not work, though adding white-space before and after the - operator will fix the problem and the calc method will function properly.
进行一些研究后，我发现多个博客文章引用白色空间，许多人甚至指出了规范（ CSS3 8.1.1 ）状态：
After doing a bit of research I found multiple blog posts reference that the white-space is required and many have even pointed to the specification (CSS3 8.1.1) which states:
此外，+和 -
运算符两侧都需要空格。 （*和/操作符可以在它们周围没有空格
的情况下使用。）
In addition, whitespace is required on both sides of the + and - operators. (The * and / operaters can be used without whitespace around them.)
现在，这些运算符必须被包裹在空白中，但是为什么？我已在规范中进一步阅读（通过第8.1.2-4节），如果在这些额外部分中解释，我不理解推理。
Now, clearly, the spec tells us that these operators must be wrapped in white-space, but why? I've read further within the spec (through sections 8.1.2-4) and if it's explained in these additional portions, I'm not understanding the reasoning.
可以解释为什么指定 calc（100％ - 1）或甚至 calc（100％/ 2）是可接受的语法，但不是 calc（100％-1）？
In simple terms, could someone explain why it was specified that calc(100% - 1) or even calc(100%/2) is acceptable syntax but not calc(100%-1)?
推荐答案
- 字符是CSS标识中允许的字符之一。根据此处提供的决议，似乎他们想要防止语法模糊性可能由于使用 - 而不使用空格，特别是使用 min-content 等关键字值（尽管AFAIK关键字值 t calc（） - 如果我错了，请更正。）
The - character is one of the allowed characters in CSS idents. Judging by the resolution given here, it seems they wanted to prevent syntactic ambiguities that could arise from using - without whitespace, especially with keyword values such as min-content (although AFAIK keyword values aren't yet allowed within calc() — correct me if I'm wrong).
Not everyone agrees with this resolution, though.
这篇关于为什么在Calc（）方法中必须用空格包围+或 - ？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
