13919049954

说说CSS3中的calc()属性

作者:金城在线 日期:2018/2/9 10:56:33 人气:312

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


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


            金城在线专注网站、软件、APP、微信公众平台、小程序、抖音、头条等开发推广,如果您有这方面的需求或者不同的观点,欢迎联系交流。

    官方微信

    本文网址:http://www.lz.net.cn/zixunzhongxin/730.html
    读完这篇文章后,您心情如何?
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    更多>>网友评论
    发表评论