为什么calc(50%+ 0)出错？

Question

在测试一些新的布局时,我发现自己一度写作

.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>

(顺便说一句,让我向你保证,我无意在生产代码中使用它;这只是测试中出现的内容.)

Answer 1

这是由于类型检查

在+或- ,检查两侧具有相同的类型,或者一面是<number>,另一个是一个<integer>.如果双方都是同一类型,请解析为该类型.如果一方是a <number>而另一方是a <integer>,请解决<number>.

如果操作员未通过上述检查,则表达式无效.

您当前的代码有两个值,50%是a percentage,0是integer/ number.它不确认类型检查的规则.

对于Poke的评论:

来自计算值的参考

如果百分比未在计算值时解析,则它们不会在calc()表达式中解析,例如calc(100% - 100%+ 1em)解析为calc(0%+ 1em),而不是calc(1em).如果存在用于计算值中的百分比的特殊规则(例如,高度属性),则只要calc()表达式包含百分比,它们就会应用.

注意:因此,calc()表达式的计算值可以表示为维度的数字或元组和百分比.

所以可以说这50% + 10px是类型检查的一个例外,它包含在本文的计算值部分中.

Answer 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>的类型由其单位给出(cm是<length>,deg <angle>等).

你表达的左侧:50%, 50px, or 50em是所有 units的length类型加以<dimension-token>小号,和你表达的右侧:0是一种integer类型,是一个<number-token>.

正如@Manoj所提到的,+或-运算符明确地将操作数限制为相同类型,即length或者time或者number-tokens.

后面的上面的参考:

在+或-,检查双方是否具有相同的类型,或者一方是a <number>,另一方是a <integer>.如果双方都是同一类型,请解析为该类型....

总结:

50% + 0px ? Both are of the same type i.e. 'length
50% + 0   ? Left is 'length' type and the right is 'integer' type.