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


Posted in HTML / CSS onMay 07, 2023

问题起因

在使用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

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

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

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

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

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)内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
css3实例教程 一款纯css3实现的环形导航菜单
Oct 20 HTML / CSS
CSS3 text-shadow实现文字阴影效果
Feb 24 HTML / CSS
css3实现圆锥渐变conic-gradient效果
Feb 12 HTML / CSS
详解css3中的伪类before和after常见用法
Nov 17 HTML / CSS
关于前端上传文件全面基础扫盲贴(入门)
Aug 01 HTML / CSS
详解Html5页面实现下载文件(apk、txt等)的三种方式
Oct 22 HTML / CSS
CSS 新特性 contain控制页面的重绘与重排问题
Apr 30 HTML / CSS
浅谈CSS不规则边框的生成方案
May 25 HTML / CSS
html5调用摄像头实例代码
Jun 28 HTML / CSS
css实现两栏布局,左侧固定宽,右侧自适应的多种方法
Aug 07 HTML / CSS
CSS三大特性继承性、层叠性和优先级详解
Jan 18 HTML / CSS
css如何把元素固定在容器底部的四种方式
Jun 16 HTML / CSS
HTML中link标签属性的具体用法
May 07 #HTML / CSS
css弧边选项卡的项目实践
May 07 #HTML / CSS
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
May 07 #HTML / CSS
CSS实现鼠标悬浮动画特效
CSS link与@import的区别和用法解析
May 07 #HTML / CSS
html,css,javascript是怎样变成页面的
May 07 #HTML / CSS
html原生table实现合并单元格以及合并表头的示例代码
May 07 #HTML / CSS
You might like
C# Assembly类访问程序集信息
2009/06/13 PHP
成为好程序员必须避免的5个坏习惯
2014/07/04 PHP
php准确计算复活节日期的方法
2015/04/18 PHP
解析WordPress中函数钩子hook的作用及基本用法
2015/12/22 PHP
OfflineSave离线保存代码再次发布使用说明
2007/05/23 Javascript
jquery radio 操作代码
2011/03/16 Javascript
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
2012/06/14 Javascript
JS获取节点的兄弟,父级,子级元素的方法
2014/01/09 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
2014/04/10 Javascript
Angularjs material 实现搜索框功能
2016/03/08 Javascript
浅谈AngularJS中ng-class的使用方法
2016/11/11 Javascript
Angular 4 指令快速入门教程
2017/06/07 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
2018/02/24 Javascript
vue elementUI table 自定义表头和行合并的实例代码
2019/05/22 Javascript
深入解析koa之异步回调处理
2019/06/17 Javascript
VUE渲染后端返回含有script标签的html字符串示例
2019/10/28 Javascript
vue实现路由懒加载的3种方法示例
2020/09/01 Javascript
VUE+Element实现增删改查的示例源码
2020/11/23 Vue.js
Python的类实例属性访问规则探讨
2015/01/30 Python
Python字符串拼接的几种方法整理
2017/08/02 Python
python音频处理用到的操作的示例代码
2017/10/27 Python
python http接口自动化脚本详解
2018/01/02 Python
numpy matrix和array的乘和加实例
2018/06/28 Python
详解Appium+Python之生成html测试报告
2019/01/04 Python
基于python 凸包问题的解决
2020/04/16 Python
python爬虫中url管理器去重操作实例
2020/11/30 Python
HTML5是否真的可以取代Flash
2010/02/10 HTML / CSS
纽约的奢华内衣店:Journelle
2016/07/29 全球购物
ZWILLING双立人英国网上商店:德国刀具锅具厨具品牌
2018/05/15 全球购物
UNDONE手表官网:世界领先的定制手表品牌
2018/11/13 全球购物
家长会主持词
2014/03/26 职场文书
热门专业求职信
2014/05/24 职场文书
大学生志愿者活动总结
2014/06/27 职场文书
关于感恩的演讲稿200字
2014/08/26 职场文书
学位证书委托书
2014/09/30 职场文书
Python 数据科学 Matplotlib图库详解
2021/07/07 Python