为什么必须用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);