为什么必须用Calc（）方法中的空格来包围+或 – ？
最近我已经开始在CSS中使用calc（…）方法。 我很快就知道，如： width: calc(100%-2)这样的代码将不起作用，但在-操作符之前和之后加上空格将会解决问题，并且calc方法将正常工作。
在做了一些研究之后，我发现多个博客文章都提到需要使用空格，许多博客文章甚至指出了规范（ CSS3 8.1.1 ），其中规定：
另外，在+和 – 操作符的两边都需要空格。 （*和/操作员可以使用没有空白周围。）
很明显，规范告诉我们这些操作员必须用白色空间包装，但为什么？ 我已经在规范中进一步阅读（通过第8.1.2-4节），如果在这些额外的部分解释，我不理解推理。
简而言之，有人可以解释为什么calc(100% - 1)甚至calc(100%/2)是可接受的语法，而不是calc(100%-1) ？
-字符是CSS标识符中允许的字符之一。 根据这里给出的解决scheme来看，他们似乎想要避免使用时可能出现的语法歧义-没有空格，特别是关键字值（如min-content （虽然在calc()还不允许AFAIK关键字值calc()如果我错了）。
不过，并不是所有人都同意这个决议。
Mozilla开发者networking解释得非常好：
注意 ：
+和-运算符必须总是被空白包围。 例如calc(50% -8px)的操作数将被parsing为一个百分比，接着是一个负值长度，一个无效的expression式，而calc(50% - 8px)的操作数是一个百分比，后面跟着一个减号和一个长度。 更进一步，calc(8px + -50%)被视为长度，后跟加号和负数百分比。
*和/运算符不需要空格，但是为了一致性而添加它是允许的，并且是推荐的。
我想你应该首先考虑CSS如何识别长度。 长度被定义为一个可选的符号，后跟一个模块和一个可选的度量单位（虽然许多属性实际上需要它）：
<CSSlength> := [<sign>]<module>[<unit>]
所以，例如，有效的CSS长度是：
-3px 100em +10pc 0 91 5%
定义一个这样的长度，CSS引擎分析以下内容：
calc(100% -1px);
作为一个长度，然后是另一个长度。 在这种情况下，它将是100%然后是-1px ，这对calc()根本没有意义。 这也在相关的MDN文档页面中解释。
为了在关系中放两个长度，你需要使用一个独立的运算符，因此，按照上面的逻辑，你需要使用空格：
calc(100% - 1px);
