说说CSS3中的calc()属性

网站建设知识 phpacg 2年前 (2018-04-24) 118次浏览 0个评论

明天有人问到“CSS3中calc()属性加(+)、减(-)运算符为何必需加空格?”

说下团体的观念:

大体上是为了消弭歧义,深化的话,是由于解析器的标识的历史定义形成的,所以也算一个历史效果。

中心语法是

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定义:

DIMENSION{num}{ident}

再看{ident}

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

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

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

所以calc(20px-10px)会有歧义,在解析器看来,是值20以及未知单位px-10px。而乘号和除号就没有这个效果,所以有没有空格都是可以的。

其实觉得加减号表示正负也完全说的通,甚至十分方便记忆。比如 100%/2 – 2*2em 看起来就挺好。

规则加减号有空格应该也是权衡之举吧,至少最后的结果不是很混杂。

喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址