CSS中calc语法不生效

embedded/2024/11/25 18:54:08/

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

css">height:calc(100vh-100px);

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

css">height:calc(100vh - 100px);

这是为什么?

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

css">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。但是这个例子,只能较好的解释为什么在-后面加空格。为什么前面也要加空格?

引出新的例子

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

css">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中会常常用到负数。再引出一个新的例子:

css">height:clac(500px - -100px);

再遇到这种情况怎么办?

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


http://www.ppmy.cn/embedded/140462.html

相关文章

js判断一个对象身上是否有某个属性

五种判断方式 // 布尔值判断const isCover Body?.cover || 1000console.log(isCover,isCover)// 2,Underficonst Cover Body?.cover console.log(Cover,Cover)// 3,使用Object.keys()遍历出所有的属性名,然后再判断是否包含这个属性名const keys Ob…

CSS实现实现当文本内容过长时,中间显示省略号...,两端正常展示

HTML 结构解析 文档结构: <ul class"con">: 一个无序列表&#xff0c;包含多个列表项。 每个 <li class"wrap"> 表示一个列表项&#xff0c;内部有两个 <span> 元素&#xff1a; <span class"txt">: 显示文本内容。<…

网络传输:网卡、IP、网关、子网掩码、MAC、ARP、路由器、NAT、交换机

目录 网卡IP网络地址主机地址子网子网掩码网关默认网关 MACARPARP抓包分析 路由器NATNAPT 交换机 网卡 网卡(Network Interface Card&#xff0c;简称NIC)&#xff0c;也称网络适配器。 OSI模型&#xff1a; 1、网卡工作在OSI模型的最后两层&#xff0c;物理层和数据链路层。物…

【技术支持】vscode不使用插件,两种方式重命名html标签对

1. 使用 VS Code 内置功能 VS Code 内置支持 HTML/XML 标签对的重命名功能。步骤如下&#xff1a; 将光标放置在标签名上&#xff08;如 <div> 或</div>&#xff09;。按下快捷键 F2&#xff08;重命名符号&#xff09;。输入新的标签名&#xff0c;按 Enter&…

信息收集ip测活-Python脚本编写

编写一个python脚本&#xff0c;下面为实现的功能点&#xff1a; 文件读取与IP提取&#xff1a;读取指定文件夹下的所有txt文件&#xff0c;提取其中的IP地址。 端口号添加&#xff1a;为每个IP地址添加多个指定的端口号。 测活功能&#xff1a;使用socket库进行连…

深入探索JMeter的执行器时间线:从CLArgsParser到JmeterEngine

引言 Apache JMeter是一款广泛使用的开源性能测试工具&#xff0c;它允许用户对各种服务进行负载测试。然而&#xff0c;了解其内部工作机制对于优化测试计划和提高测试效率至关重要。本文将深入探讨JMeter的执行器时间线&#xff0c;包括CLArgsParser、HashTree、StandardJme…

C语言:深入理解指针

一.内存和地址 我们知道计算机上CPU&#xff08;中央处理器&#xff09;在处理数据的时候&#xff0c;需要的数据是在内存中读取的&#xff0c;处理后的数据也会放回内存中&#xff0c;那我们买电脑的时候&#xff0c;电脑上内存是 8GB/16GB/32GB 等&#xff0c;那这些内存空间…

【机器学习】超简明Python基础教程

Python是一种简单易学、功能强大的编程语言&#xff0c;适用于数据分析、人工智能、Web开发、自动化脚本等多个领域。本教程面向零基础学习者&#xff0c;逐步讲解Python的基本概念、语法和操作。 1. 安装与运行 安装Python 从官网 Welcome to Python.org 下载适合自己系统的…