CSS中calc语法不生效

问题起因
在使用calc时发现无法生效,写法是:

height:calc(100vh-100px);

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

height:calc(100vh - 100px);

这是为什么?

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

calc(expression)

用法&定义

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

解析calc(100%-100px)
手动解析一下calc(100%-100px)。先过DIMENSION语法,{num}{ident}将其分割为num:100、ident:%-100px。

为什么是%-100px?

其实,应该是%和-100px,两个被作为单位解析。因为-100px符合nmchar语法,没有将其拆分。如果-100px有个空格,就会拆分为-和100以及px。但是这个例子,只能较好的解释为什么在-后面加空格。为什么前面也要加空格?

引出新的例子

在此,引出一个新的例子:

heght:calc(100px-1oopx);

在编译时时,会将其直接拆分为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中会常常用到负数。再引出一个新的例子:

height:clac(500px - -100px);

再遇到这种情况怎么办?

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/61861.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JVM标量替换

JVM标量替换 简单来说 JVM 中的标量替换是一种编译优化技术,将未逃逸对象拆解成不能再分,标量在栈帧或寄存器中分配使用。将对象拆解后直接使用标量,不但避免了完整对象的创建和后续回收流程,而且能更快地获取和操作相应的数据&…

李继刚:提示词(Prompt)的本质是表达的艺术

看了李继刚在 AI 创新者大会的演讲《提示词的道与术》,收获很大,我分享一下学习笔记。  李继刚:提示词(Prompt)的本质是表达的艺术 一、提示词的本质是表达 本意、文意和解意的概念: 本意:指…

复古风格渐变褪色人像旅拍Lr调色教程,手机滤镜PS+Lightroom预设下载!

调色教程 这种调色风格旨在通过调整色彩和光影,为人像旅拍照片赋予复古的氛围和艺术感。渐变褪色效果增添了一种时光沉淀的感觉,使照片仿佛来自过去的岁月。 预设信息 调色风格:复古风格预设适合类型:人像,街拍&…

数学建模学习(138):基于 Python 的 AdaBoost 分类模型

1. AdaBoost算法简介 AdaBoost(Adaptive Boosting)是一种经典的集成学习算法,由Yoav Freund和Robert Schapire提出。它通过迭代训练一系列的弱分类器,并将这些弱分类器组合成一个强分类器。算法的核心思想是:对于被错误分类的样本,在下一轮训练中增加其权重;对于正确分类…

leetcode 面试150之 156.LUR 缓存

请你设计并实现一个满足 LRU (最近最少使用) 缓存 约束的数据结构。 实现 LRUCache 类: LRUCache(int capacity) 以 正整数 作为容量 capacity 初始化 LRU 缓存int get(int key) 如果关键字 key 存在于缓存中,则返回关键字的值,否则返回 -…

HTTP工作原理

HTTP协议工作于客户端/服务端架构上。浏览器作为HTTP客户端通过URL向HTTP服务端即WEB服务器发送所有请求。 首先客户端与服务器需要建立连接。只要单击某个超链接,HTTP就开始工作。 建立连接后,客户端发送一个请求给服务器,请求方式的格式为&…

Android Studio更改项目使用的JDK

一、吐槽 过去,在安卓项目中配置JDK和Gradle的过程非常直观,只需要进入Android Studio的File菜单中的Project Structure即可进行设置,十分方便。 原本可以在这修改JDK: 但大家都知道,Android Studio的狗屎性能,再加…

字节青训营开课啦

系列文章目录 文章目录 系列文章目录一、字节青训营是什么?二、你将获得三、入营条件四、课程简介1.前端2.后端3.大数据 五、报名 一、字节青训营是什么? 青训营是字节跳动技术团队发起的技术系列培训&人才选拔项目;面向高校在校生&…

医药企业的终端市场营销策略

近年来,随着医药行业的快速发展,终端市场逐渐成为企业竞争的关键领域。在政策趋严、市场环境变化以及数字化转型的大背景下,医药企业如何在终端市场中立于不败之地?本文结合我们在医药数字化领域的经验,为大家剖析终端…

经验笔记:远端仓库和本地仓库之间的连接(以Gitee为例)

经验笔记:远端仓库和本地仓库之间的连接 方法一:先创建远端仓库,再克隆到本地 创建远端仓库 登录到你的Git托管平台(如Gitee、GitHub、GitLab、Bitbucket等)。点击“New Repository”或类似按钮,创建一个新…

重构代码之将单向关联转换为双向关联

将单向关联转换为双向关联 旨在将类之间的单向关联转换为双向关联。这通常用于改善对象模型的可访问性和灵活性,尤其是在涉及复杂关系的领域模型中。它适用于对象关系之间存在单向引用,但业务逻辑要求这些对象能够相互访问和更新的场景。 一、什么是单向…

养老院管理系统+小程序项目需求分析文档

智慧综合养老服务平台是以业务为牵引、场景为驱动,围绕“老人”业务域,持续沉淀和打磨形成适应不同养老业务发展需要的业务能力,推动业务模式升级,为养老服务提供数字化解决方案,并依托实体站点与养老机构实现线上线下…

迄今为止的排序算法总结

迄今为止的排序算法总结 7.10 迄今为止的排序算法总结复杂度和稳定性时间复杂度测试程序sortAlgorithm.hsortAlgorithm.cpptest.cpp 时间复杂度测试结果 7.10 迄今为止的排序算法总结 复杂度和稳定性 排序算法平均情况最好情况最坏情况稳定性空间复杂度选择排序O(n^2)O(n^2)O…

SpringBoot集成ES(ElasticSearch)

1.导入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-elasticsearch</artifactId> </dependency>导入依赖后&#xff0c;注意在依赖中查看对应的版本是否与本机ES对应 2.创建配置并…

FEM位移边界条件的处理

在有限元分析中&#xff0c;处理唯一约束&#xff08;如位移边界条件或特定的自由度被固定&#xff09;&#xff0c;常见的方法包括以下几种。每种方法的特点和适用场景有所不同&#xff0c;具体选择取决于问题性质和数值求解需求。 直接代入法 置大数法 置1法 拉格朗日乘子法…

ant-design-vue中table某一列进行合并

ant-design-vue中table某一列进行合并 1、在colums中配置自定义渲染 {title: 区域,dataIndex: cityName,key: cityName,align: center,width: 120,customCell: (record, rowIndex, column) > {return {rowSpan: record.rowSpan}} },2、处理请求来的数据 tableData.dataSo…

MySQL高级(五):事务

概念 事务是数据库管理系统中用于保证数据一致性和完整性的重要机制。它允许将一组操作视为一个整体&#xff0c;要么全部执行&#xff0c;要么全部回滚&#xff0c;以确保数据的正确性。 事务的特性&#xff08;ACID&#xff09; 原子性&#xff08;Atomicity&#xff09; …

Flutter:flutter_screenutil屏幕适配

1、安装flutter_screenutil flutter_screenutil: ^5.9.32、main入口修改 // 新增 ScreenUtilInit()class MyApp extends StatelessWidget {const MyApp({Key? key}) :super(key: key);overrideWidget build(BuildContext context) {return ScreenUtilInit(designSize: const S…

数据结构之二:表

顺序表代码&#xff1a;SData/SqList/SeqList.h Hera_Yc/bit_C_学习 - 码云 - 开源中国 链表相关代码&#xff1a;SData/ListLink/main.c Hera_Yc/bit_C_学习 - 码云 - 开源中国 本文主要讲解的是线性表&#xff08;逻辑线性&#xff09;&#xff0c;对于非线性表不做补充。…

《Python基础》之循环结构

目录 简介 一、for循环 1、基本语法与作用 2、使用 range() 函数配合 for 循环 3、嵌套的for循环 二、while循环 1、基本语法与作用 2、while 循环嵌套 &#xff08;1&#xff09;、while循环与while循环嵌套 &#xff08;2&#xff09;、while循环与for循环嵌套 简介 …