CSS中calc(80vw - 100px)为什么不加空格会不生效?

问题起因

今天再使用calc时发现无法生效,我的写法是:

  width: calc(100%-100px);

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

  width: calc(100% - 100px);

有亿点疑惑,这是为什么?

calc是什么?

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

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

用法&定义

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

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

文档链接》》

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

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第二段的开头

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'(数字100和单位px)、'-'、'100px'(数字100和单位px)来解析。

源码为什么怎么写?

为什么要把'-'放在里面?我们写成calc(100% -100px)或者calc(100px -100px)为什么不行?

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

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

再遇到这种情况怎么办?

100'和'px'。因为在CSS中是有负数的概念的,就像margin和padding中会常常用到负数。再引出一个新的例子:

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

再遇到这种情况怎么办?

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

相关推荐
懒大王爱吃狼37 分钟前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風5 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫5 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦6 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子6 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山7 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享7 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
清灵xmf9 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨9 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL9 小时前
npm入门教程1:npm简介
前端·npm·node.js