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 透明色 RGBA使用介绍
Aug 06 HTML / CSS
css3圆角样式分享自定义按钮样式
Dec 27 HTML / CSS
带有css3动画效果的兼容多浏览器简单导航条示例
Jan 26 HTML / CSS
CSS3绘制不规则图形的一些方法示例
Nov 07 HTML / CSS
CSS3常用的几种颜色渐变模式总结
Nov 18 HTML / CSS
利用 CSS3 实现的无缝轮播功能代码
Sep 25 HTML / CSS
CSS3田字格列表的样式编写方法
Nov 22 HTML / CSS
HTML5文档结构标签
Apr 21 HTML / CSS
HTML5 video播放器全屏(fullScreen)方法实例
Apr 24 HTML / CSS
three.js模拟实现太阳系行星体系功能
Sep 03 HTML / CSS
遮罩层 + Iframe实现界面自动显示的示例代码
Apr 26 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
PHP4之COOKIE支持详解
2006/10/09 PHP
PHP中冒号、endif、endwhile、endfor使用介绍
2010/04/28 PHP
ThinkPHP与PHPExcel冲突解决方法
2011/08/08 PHP
php 计划任务 检测用户连接状态
2012/03/29 PHP
php中使用sftp教程
2015/03/30 PHP
总结PHP删除字符串最后一个字符的三种方法
2016/08/30 PHP
PHP 极验验证码实例讲解
2016/09/29 PHP
javascript多种数据类型表格排序代码分析
2010/09/11 Javascript
ECMAScript6中Set/WeakSet详解
2015/06/12 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
2015/12/24 Javascript
JQUERY的AJAX请求缓存里的数据问题处理
2016/02/23 Javascript
javascript 中Cookie读、写与删除操作
2017/03/29 Javascript
vue如何判断dom的class
2018/04/26 Javascript
JavaScript中关于base64的一些事
2019/05/06 Javascript
Vue父组件如何获取子组件中的变量
2019/07/24 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
2020/05/29 jQuery
vue动态加载SVG文件并修改节点数据的操作代码
2020/08/17 Javascript
Python根据成绩分析系统浅析
2019/02/11 Python
python腾讯语音合成实现过程解析
2019/08/01 Python
详解python3中用HTMLTestRunner.py报ImportError: No module named 'StringIO'如何解决
2019/08/27 Python
Python+Selenium+phantomjs实现网页模拟登录和截图功能(windows环境)
2019/12/11 Python
python3 动态模块导入与全局变量使用实例
2019/12/22 Python
Pycharm 2020年最新激活码(亲测有效)
2020/09/18 Python
tensorflow实现对张量数据的切片操作方式
2020/01/19 Python
Flask中sqlalchemy模块的实例用法
2020/08/02 Python
python openCV实现摄像头获取人脸图片
2020/08/20 Python
Python OpenCV中的numpy与图像类型转换操作
2020/12/11 Python
南京软件公司的.net程序员笔试题
2014/08/31 面试题
品学兼优的大学生自我评价
2013/09/20 职场文书
小学门卫岗位职责
2013/12/17 职场文书
竞聘演讲稿范文
2014/01/12 职场文书
仓管岗位职责范本
2014/02/08 职场文书
离婚财产处理协议书
2014/09/30 职场文书
2014年安全保卫工作总结
2014/11/13 职场文书
文明旅游倡议书
2015/04/28 职场文书
Python入门之基础语法详解
2021/05/11 Python