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绘制百度的小度熊
Oct 29 HTML / CSS
简单介绍CSS3中Media Query的使用
Jul 07 HTML / CSS
Css3新特性应用之形状总结
Dec 08 HTML / CSS
CSS3实现可翻转的hover效果
May 23 HTML / CSS
html5 sessionStorage会话存储_动力节点Java学院整理
Jul 06 HTML / CSS
如何使用localstorage代替cookie实现跨域共享数据问题
Apr 18 HTML / CSS
浅谈html5增强的页面元素
Jun 14 HTML / CSS
浅谈移动端网页图片预加载方案
Nov 05 HTML / CSS
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
Mar 30 HTML / CSS
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
Mar 31 HTML / CSS
html+css实现分层金字塔的实例
Jun 02 HTML / CSS
基于HTML十秒做出淘宝页面
Oct 24 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
模拟SQLSERVER的两个函数:dateadd(),datediff()
2006/10/09 PHP
php版微信自定义回复功能示例
2016/12/05 PHP
PHP7 整型处理机制修改
2021/03/09 PHP
Javascript下的keyCode键码值表
2007/04/10 Javascript
javascript在事件监听方面的兼容性小结
2010/04/07 Javascript
一些常用弹出窗口/拖放/异步文件上传等实用代码
2013/01/06 Javascript
提取字符串中年月日的函数代码
2013/11/05 Javascript
10个很棒的jQuery代码片段
2015/09/24 Javascript
使用JavaScript脚本判断页面是否在微信中被打开
2016/03/06 Javascript
JS实现的自定义水平滚动字体插件完整实例
2016/06/17 Javascript
Angular实现双向折叠列表组件的示例代码
2017/11/21 Javascript
webpack打包js文件及部署的实现方法
2017/12/18 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
2018/01/30 Javascript
vue 表单验证按钮事件交由父组件触发的方法
2018/12/17 Javascript
Webpack4 使用Babel处理ES6语法的方法示例
2019/03/07 Javascript
微信小程序实现动态列表项的顺序加载动画
2019/07/25 Javascript
JS前后端实现身份证号验证代码解析
2020/07/23 Javascript
[00:59]PWL开团时刻DAY7——我在赶
2020/11/06 DOTA
Python调用C语言开发的共享库方法实例
2015/03/18 Python
pygame学习笔记(5):游戏精灵
2015/04/15 Python
Python中的自省(反射)详解
2015/06/02 Python
python实现远程通过网络邮件控制计算机重启或关机
2018/02/22 Python
Python爬虫实现全国失信被执行人名单查询功能示例
2018/05/03 Python
Python提取频域特征知识点浅析
2019/03/04 Python
Python 堆叠柱状图绘制方法
2019/07/29 Python
如何利用python给图片添加半透明水印
2019/09/06 Python
基于Python实现天天酷跑功能
2021/01/06 Python
澳大利亚排名第一的露营和户外设备在线零售商:Outbax
2020/05/06 全球购物
CSMA/CD介质访问控制协议
2015/11/17 面试题
医学院毕业生自荐信
2013/11/08 职场文书
应急处置方案
2014/06/16 职场文书
个人专业技术总结
2015/03/05 职场文书
道歉信怎么写
2015/05/12 职场文书
2016春季幼儿园小班开学寄语
2015/12/03 职场文书
MySQL完整性约束的定义与实例教程
2021/05/30 MySQL
图文详解matlab原始处理图像几何变换
2021/07/09 Python