服务与支持 |咨询热线 0931-8733767
  • 金城在线
  • 公司简介
  • 发展历程
  • 企业文化
  • 售后服务
  • 工作机会
  • 联系我们

说说CSS3中的calc()属性

来源:发布时间:2018-2-9 10:56:33

今天有人问到“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 看起来就挺好。


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


相关文章
  • 预约专家

    为您提供一对一解决方案
    立即预约
  • 售前咨询

    周一至周五9:00——17:30
    立即咨询
  • 联系方式

    13919049954

    全国7×24小时热线服务
  • 免费报价

    专属专业顾问1对1报价
    免费报价