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实现3D旋转书本效果
Mar 21 HTML / CSS
CSS3 制作旋转的大风车(充满童年回忆)
Jan 30 HTML / CSS
纯CSS3打造属于自己的“小黄人”
Mar 14 HTML / CSS
谈谈对css属性box-sizing的了解
Jan 04 HTML / CSS
css3加js做一个简单的3D行星运转效果实例代码
Jan 18 HTML / CSS
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
Apr 10 HTML / CSS
HTML5中FileReader接口使用方法实例详解
Aug 26 HTML / CSS
HTML5实践-图片设置成灰度图
Nov 12 HTML / CSS
HTML5 Canvas锯齿图代码实例
Apr 10 HTML / CSS
详解html5 canvas常用api总结(二)--绘图API
Dec 14 HTML / CSS
html5实现多图片预览上传及点击可拖拽控件
Mar 15 HTML / CSS
HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧
Aug 28 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
PHP个人网站架设连环讲(四)
2006/10/09 PHP
实时抓取YAHOO股票报价的代码
2006/10/09 PHP
PHP中数据类型转换的三种方式
2015/04/02 PHP
[JS源码]超长文章自动分页(客户端版)
2007/01/09 Javascript
JavaScript函数、方法、对象代码
2008/10/29 Javascript
js获取元素在浏览器中的绝对位置
2010/07/24 Javascript
JavaScript中变量提升 Hoisting
2012/07/03 Javascript
EASYUI TREEGRID异步加载数据实现方法
2012/08/22 Javascript
js的onload事件及初始化按钮事件示例代码
2013/09/25 Javascript
jQuery html()方法使用不了无法显示内容的问题
2014/08/06 Javascript
javascript中alert()与console.log()的区别
2015/08/26 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
2016/01/12 Javascript
Bootstrap树形控件使用方法详解
2016/01/27 Javascript
jQuery之简单的表单验证实例
2016/07/07 Javascript
jquery实现简单的瀑布流布局
2016/12/11 Javascript
根据Bootstrap Paginator改写的js分页插件
2016/12/25 Javascript
遍历json获得数据的几种方法小结
2017/01/21 Javascript
利用jQuery异步上传文件的插件用法详解
2017/07/19 jQuery
bootstrap3-dialog-master模态框使用详解
2017/08/22 Javascript
使用cookie绕过验证码登录的实现代码
2017/10/12 Javascript
Vue组件化开发思考
2018/02/02 Javascript
vue.js指令v-for使用以及下标索引的获取
2019/01/31 Javascript
JavaScript实现身份证验证代码实例
2019/08/26 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
2020/12/30 Vue.js
python解析模块(ConfigParser)使用方法
2013/12/10 Python
Django 解决开发自定义抛出异常的问题
2020/05/21 Python
CHARLES & KEITH加拿大官网:新加坡时尚品牌
2020/03/26 全球购物
北京某科技有限公司C# .net笔试题
2014/09/27 面试题
优秀村官事迹材料
2014/01/10 职场文书
运动会广播稿200米
2014/01/27 职场文书
房地产项目建议书
2014/03/12 职场文书
国庆节促销广告语2014
2014/09/19 职场文书
2015年教务处干事工作总结
2015/07/22 职场文书
2016教师校本培训心得体会
2016/01/08 职场文书
利用 JavaScript 构建命令行应用
2021/11/17 Javascript
python入门学习关于for else的特殊特性讲解
2021/11/20 Python