CSS中calc(100%-100px)不加空格不生效

問題起因
在使用calc
時(shí)發(fā)現(xiàn)無法生效,寫法是:
width: calc(100%-100px);
頁面無效果,加空格后就發(fā)現(xiàn)有效果了:
width: calc(100% - 100px);
這是為什么?
calc是什么?
css3 的計(jì)算屬性,用于動(dòng)態(tài)計(jì)算長度值。calc
語法:
calc(expression) // expression 是數(shù)學(xué)表達(dá)式
用法&定義
- 運(yùn)算符前后都需要保留一個(gè)空格,例如:
width: calc(100% - 100px)
; - 任何長度值都可以使用
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ǔ)語法和數(shù)據(jù)類型:
https://www.w3.org/TR/CSS2/syndata.html
在文檔的這里應(yīng)該是這里的核心語法:
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應(yīng)該是數(shù)字,翻一下ident的定義:
在4.1.1第二段的開頭
ident [-]?{nmstart}{nmchar}*
nmstart和nmchar的分別有:
nmstart [_a-z]|{nonascii}|{escape} nmchar [_a-z0-9-]|{nonascii}|{escape}
解析calc(100%-100px)
手動(dòng)解析一下calc(100%-100px)
。先過DIMENSION
語法,{num}{ident}將其分割為num:100、ident:%-100px
。
為什么是%-100px
?
其實(shí),應(yīng)該是%
和-100px
,兩個(gè)被作為單位解析。因?yàn)?code>-100px符合nmchar語法,沒有將其拆分。如果-100px
有個(gè)空格,就會(huì)拆分為-
和100
以及px
。但是這個(gè)例子,只能較好的解釋為什么在-
后面加空格。為什么前面也要加空格?
引出新的例子
在此,引出一個(gè)新的例子:
width: calc(100px-100px);
在編譯時(shí)時(shí),會(huì)將其直接拆分為100
和px-100px
,將px-100px
過nmchar完全符合\[\_a-z0-9-\]
。將其保留作為單位解析。但是px-100px
不屬于CSS中任何一個(gè)單位,也并無單位的定義。
(這個(gè)案例,會(huì)更加好的解釋,為什么-
的前后都需要加空格。)
如果-
的前后有空格,就會(huì)被拆分為100px
(數(shù)字100和單位px)、-
、100px
(數(shù)字100和單位px)來解析。
源碼為什么怎么寫?
為什么要把-
放在里面?寫成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);
再遇到這種情況怎么辦?
如果沒有對(duì)于負(fù)號(hào)的定義應(yīng)該就會(huì)500px
、-
、-
、100px
,兩個(gè)減號(hào)怎么編譯呢。在-
的前后都加上空格,區(qū)別開減法和負(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)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
- CSS3新增的函數(shù)中有一個(gè)非常好用的函數(shù),就是calc()函數(shù),用過的都說好,這篇文章我們來嘮一老calc函數(shù),感興趣的朋友一起看看吧2022-06-23
- 大家都知道Calc方法有個(gè)很大的好處就是用在流體布局上,可以通過calc()計(jì)算得到元素的寬度,本文通過一個(gè)例子給大家詳細(xì)介紹,需要的朋友參考下吧2021-06-03
CSS使用calc()獲取當(dāng)前可視屏幕高度的實(shí)現(xiàn)
這篇文章主要介紹了CSS使用calc()獲取當(dāng)前可視屏幕高度的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編2020-07-14深入理解CSS中的數(shù)學(xué)表達(dá)式calc()
數(shù)學(xué)表達(dá)式calc()是CSS中的函數(shù),主要用于數(shù)學(xué)運(yùn)算。這篇文章給大家介紹了CSS中的數(shù)學(xué)表達(dá)式calc()的相關(guān)知識(shí),感興趣的朋友一起看看吧2020-01-19css中的計(jì)算函數(shù)calc在網(wǎng)站布局中一個(gè)示例
這篇文章主要介紹了css中的計(jì)算函數(shù)calc在網(wǎng)站布局中一個(gè)示例的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下2019-08-12- 這篇文章主要介紹了淺析CSS中calc()的使用的相關(guān)資料,需要的朋友可以參考下2016-05-10