問(wèn)題起因

在使用calc時(shí)發(fā)現(xiàn)無(wú)法生效，寫法是：

width: calc(100%-100px);

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

width: calc(100% - 100px);

這是為什么？

calc是什么？

css3 的計(jì)算屬性，用于動(dòng)態(tài)計(jì)算長(zhǎng)度值。calc語(yǔ)法：

calc(expression)      // expression 是數(shù)學(xué)表達(dá)式

用法&定義

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

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

https://www.w3.org/TR/CSS2/syndata.html

在文檔的這里應(yīng)該是這里的核心語(yǔ)法：

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語(yǔ)法在最上面：

DIMENSION {num}{ident}

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

在4.1.1第二段的開(kāi)頭

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

nmstart和nmchar的分別有：

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

解析calc(100%-100px)

手動(dòng)解析一下calc(100%-100px)。先過(guò)DIMENSION語(yǔ)法，{num}{ident}將其分割為num：100、ident：%-100px。

為什么是%-100px？

其實(shí)，應(yīng)該是%和-100px，兩個(gè)被作為單位解析。因?yàn)?code>-100px符合nmchar語(yǔ)法，沒(méi)有將其拆分。如果-100px有個(gè)空格，就會(huì)拆分為-和100以及px。但是這個(gè)例子，只能較好的解釋為什么在-后面加空格。為什么前面也要加空格？

引出新的例子

在此，引出一個(gè)新的例子：

width: calc(100px-100px);

在編譯時(shí)時(shí)，會(huì)將其直接拆分為100和px-100px，將px-100px過(guò)nmchar完全符合\[\_a-z0-9-\]。將其保留作為單位解析。但是px-100px不屬于CSS中任何一個(gè)單位，也并無(wú)單位的定義。
（這個(gè)案例，會(huì)更加好的解釋，為什么-的前后都需要加空格。）
如果-的前后有空格，就會(huì)被拆分為100px(數(shù)字100和單位px）、-、100px(數(shù)字100和單位px）來(lái)解析。

源碼為什么怎么寫？

為什么要把-放在里面？寫成calc(100% -100px)或者calc(100px -100px)為什么不行？
在這里，要引入一個(gè)正負(fù)數(shù)的概念，因?yàn)樵跀?shù)學(xué)標(biāo)識(shí)符當(dāng)中還有正號(hào)和負(fù)號(hào)這兩個(gè)標(biāo)識(shí)符。光看calc(100% -100px)和calc(100px -100px)的后半部分，-100px是不是更像是這里為-100和px。因?yàn)樵贑SS中是有負(fù)數(shù)的概念的，就像margin和padding中會(huì)常常用到負(fù)數(shù)。再引出一個(gè)新的例子：

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

再遇到這種情況怎么辦？

如果沒(méi)有對(duì)于負(fù)號(hào)的定義應(yīng)該就會(huì)500px、-、-、100px，兩個(gè)減號(hào)怎么編譯呢。在-的前后都加上空格，區(qū)別開(kāi)減法和負(fù)號(hào)。

參考資料

https://www.w3.org/TR/CSS2/syndata.html

到此這篇關(guān)于CSS中calc(100%-100px)不加空格不生效的文章就介紹到這了,更多相關(guān)CSS中calc(100%-100px)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評(píng)論