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

  发布时间:2023-05-05 16:12:59   作者: 睡醒想钱钱   我要评论
本文主要介绍了CSS中calc(100%-100px)不加空格不生效,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

问题起因

在使用calc时发现无法生效,写法是:

width: calc(100%-100px);

页面无效果,加空格后就发现有效果了:

width: calc(100% - 100px);

这是为什么?

calc是什么?

css3 的计算属性,用于动态计算长度值。calc语法:

calc(expression)      // expression 是数学表达式

用法&定义

  • 运算符前后都需要保留一个空格,例如:width: calc(100% - 100px)
  • 任何长度值都可以使用calc()函数进行计算;
  • calc() 函数支持 "+", "-", "*", "/" 运算;
  • calc() 函数使用标准的数学运算优先级规则;

先了解一下CSS中基础语法和数据类型:

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

在文档的这里应该是这里的核心语法:

image.png

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应该是数字,翻一下ident的定义:

在4.1.1第二段的开头

image.png

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);

在编译时时,会将其直接拆分为100px-100px,将px-100px过nmchar完全符合\[\_a-z0-9-\]。将其保留作为单位解析。但是px-100px不属于CSS中任何一个单位,也并无单位的定义。
(这个案例,会更加好的解释,为什么-的前后都需要加空格。)
如果-的前后有空格,就会被拆分为100px(数字100和单位px)、-100px(数字100和单位px)来解析。

源码为什么怎么写?

为什么要把-放在里面?写成calc(100% -100px)或者calc(100px -100px)为什么不行?
在这里,要引入一个正负数的概念,因为在数学标识符当中还有正号和负号这两个标识符。光看calc(100% -100px)calc(100px -100px)的后半部分,-100px是不是更像是这里为-100px。因为在CSS中是有负数的概念的,就像margin和padding中会常常用到负数。再引出一个新的例子:

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

再遇到这种情况怎么办?

如果没有对于负号的定义应该就会500px--100px,两个减号怎么编译呢。在-的前后都加上空格,区别开减法和负号。

参考资料

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

到此这篇关于CSS中calc(100%-100px)不加空格不生效的文章就介绍到这了,更多相关CSS中calc(100%-100px)内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

相关文章

  • CSS的calc函数用法小结

    CSS3新增的函数中有一个非常好用的函数,就是calc()函数,用过的都说好,这篇文章我们来唠一老calc函数,感兴趣的朋友一起看看吧
    2022-06-23
  • css height属性中的calc方法详解

    大家都知道Calc方法有个很大的好处就是用在流体布局上,可以通过calc()计算得到元素的宽度,本文通过一个例子给大家详细介绍,需要的朋友参考下吧
    2021-06-03
  • CSS使用calc()获取当前可视屏幕高度的实现

    这篇文章主要介绍了CSS使用calc()获取当前可视屏幕高度的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编
    2020-07-14
  • 深入理解CSS中的数学表达式calc()

    数学表达式calc()是CSS中的函数,主要用于数学运算。这篇文章给大家介绍了CSS中的数学表达式calc()的相关知识,感兴趣的朋友一起看看吧
    2020-01-19
  • css中的计算函数calc在网站布局中一个示例

    这篇文章主要介绍了css中的计算函数calc在网站布局中一个示例的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下
    2019-08-12
  • 浅析CSS中calc()的使用

    这篇文章主要介绍了浅析CSS中calc()的使用的相关资料,需要的朋友可以参考下
    2016-05-10

最新评论