CSS中calc(100%-100px)為什么不加空格會不生效？

作者：狗比玩意

鏈接：https://juejin.cn/post/7055169229980434462

問題起因

今天再使用calc時發(fā)現(xiàn)無法生效，我的寫法是：

width:?calc(100%-100px);

頁面無效果，加空格后就發(fā)現(xiàn)有效果了：

width:?calc(100%?-?100px);

有億點疑惑，這是為什么？

calc是什么？

css3 的計算屬性，用于動態(tài)計算長度值。calc語法：

calc(expression)??    //?expression 是數(shù)學表達式

用法&定義

• 運算符前后都需要保留一個空格，例如：width: calc(100% - 100px)；
• 任何長度值都可以使用calc()函數(shù)進行計算；
• calc() 函數(shù)支持 "+", "-", "*", "/" 運算；
• calc() 函數(shù)使用標準的數(shù)學運算優(yōu)先級規(guī)則；

先了解一下CSS中基礎語法和數(shù)據(jù)類型：

文檔鏈接^[1]

在文檔的這里應該是這里的核心語法：

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????{num}{ident}

num應該是數(shù)字，翻一下ident的定義：

在4.1.1第二段的開頭

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

nmstart和nmchar的分別有：

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

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

解析calc(100%-100px)

讓我們來代替解析器，解析一下calc(100%-100px)。先過DIMENSION語法，{num}{ident}將其分割為num：100、ident：%-100px。

為什么是%-100px？

其實，應該是%和-100px，兩個被作為單位解析。（這是我之前寫文章沒有關注到，我當時把%記成了字母。）因為-100px符合nmchar語法，沒有將其拆分。如果-100px有個空格，就會拆分為-和100以及px。但是這個例子，只能較好的解釋為什么在-后面加空格。為什么前面也要加空格？

引出新的例子

在此，引出一個新的例子：

width:?calc(100px-100px);

在編譯時時，會將其直接拆分為100和px-100px，將px-100px過nmchar完全符合\[\_a-z0-9-\]。將其保留作為單位解析。但是px-100px不屬于CSS中任何一個單位，也并無單位的定義。

（這個案例，會更加好的解釋，為什么-的前后都需要加空格。）

如果-的前后有空格，就會被拆分為100px(數(shù)字100和單位px）、-、100px(數(shù)字100和單位px）來解析。

源碼為什么怎么寫？

為什么要把-放在里面？我們寫成calc(100% -100px)或者calc(100px -100px)為什么不行？

在這里，要引入一個正負數(shù)的概念，因為在數(shù)學標識符當中還有正號和負號這兩個標識符。光看calc(100% -100px)和calc(100px -100px)的后半部分,-100px是不是更像是這里為-100和px。因為在CSS中是有負數(shù)的概念的，就像margin和padding中會常常用到負數(shù)。再引出一個新的例子：

width:?calc(500px?-?-100px);

再遇到這種情況怎么辦？

如果沒有對于負號的定義應該就會500px、-、-、100px，兩個減號怎么編譯呢。所以在-的前后都加上空格，區(qū)別開減法和負號。（當然這屬于個人理解，并非官方解釋）

參考資料