CSS中calc语法不生效

ops/2024/11/25 16:18:34/

问题起因
在使用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/ops/136615.html

相关文章

《Python编程实训快速上手》第八天--组织文件

一、shutil模块 shutil(或称为shell工具)模块中包含一些函数,让你可以在Python程序中复制、移动、重命名和删除文件。 1、复制文件和文件夹 source destinationdestination存在destination不存在文件文件将 source 文件复制并覆盖 d…

模拟器多开限制ip,如何设置单窗口单ip,每个窗口ip不同

很多手游多开玩家都是利用安卓模拟器实现手游多开,但是很多手游会限制ip,导致多开之后封号等问题,模拟器本身没有更换IP的功能,就需要通过第三方软件来实现 安卓模拟器概述 雷电模拟器、夜神模拟器、mum模拟器等都是目前市场上比…

c#通过网上AI大模型实现对话功能

目录 基础使用给大模型额外提供函数能力用Microsoft.Extensions.AI库实现用json格式回答 基础使用 https://siliconflow.cn/网站有些免费的大模型可以使用,去注册个账户,拿到apikey 引用 nuget Microsoft.Extensions.AI.OpenAI using Microsoft.Extensi…

移动端自动化环境搭建_Android

adb的安装与使用 adb安装adb环境变量adb使用adb常用命令adb简介adb作用 adb安装 选择对应系统进入下载界面,选中版本下载即可: Windows版本:Windows Mac版本:Mac Linux版本:Linux 安装完成后,进行压缩&…

.Net框架以及桌面UI时间线

依托于.net框架,按照时间线可分为以下三种。 桌面应用的UI可分为以下三种。 2024.10.20

工业相机视场角计算

现在常用的是海康威视品牌的相机,打开官网查找现在相机型号,在详细信息里面找到像元尺寸、和分辨率 通过计算得到传感器尺寸 (1.85/1000*40247.4444)mm (1.85*3036/10005.6166)mm 当前使用镜头焦距8mm,可以通过计算得出视场角(…

Redhat 10.0 beta (Red Hat Enterprise Linux)安装教程

Red Hat Enterprise Linux10.0 beta安装教程 一、镜像下载地址二、RHEL 10.0 beta 中的主要变化1、 安全2、动态编程语言、Web 和数据库服务器3、 编译器和开发工具4、身份管理5、Web 控制台 三、RHEL 10.0 beta 安装步骤1、配置虚拟机2、操作系统安装 一、镜像下载地址 1、点…

离散数学---概率, 期望

本文根据 MIT 计算机科学离散数学课程整理(Lecture 22 ~ Lecture 24)。 1 非负整数期望性质 用 N 表示非负整数集合,R 是 N 上的随机变量,则 R 的期望可以表示成: 证明: 换一个形式,把每一列…