信息产业部备案网站,电脑仓库管理软件,js网站繁体,我做微信淘宝客网站问题起因 在使用calc时发现无法生效#xff0c;写法是#xff1a;
height:calc(100vh-100px);页面无效果#xff0c;加空格后就发现有效果了#xff1a;
height:calc(100vh - 100px);这是为什么#xff1f;
calc是什么#xff1f; css3 的计算属性#xff0c;用于动态…问题起因 在使用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}将其分割为num100、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两个减号怎么编译呢。在-的前后都加上空格区别开减法和负号。
