目录
一、介绍
calc()这个CSS函数允许在声明CSS属性值时执行一些计算。
/* property: calc(expression) */ width: calc(100% - 80px);
此 calc()函数用一个表达式作为它的参数,用这个表达式的结果作为值。这个表达式可以是任何如下操作符的组合,采用标准操作符处理法则的简单表达式。
- +:加法。运算符两边必须要有空白字符。
- -:减法。运算符两边必须要有空白字符。
- *:乘法。乘数中至少有一个是数字。
- /:除法。除数(/右边的数)必须是数字。
二、使用CSS变量嵌套使用calc()
.foo { --widthA: 100px; --widthB: calc(var(--widthA) / 2); --widthC: calc(var(--widthB) / 2); width: var(--widthC); }
在所有的变量都被展开后,widthC
的值就会变成calc( calc( 100px / 2) / 2)
,然后,当它被赋值给.foo
的width
属性时,所有内部的这些calc()
(无论嵌套的有多深)都将会直接被扁平化为一个括号,所以这个 width 属性的值就直接相当于calc( ( 100px / 2) / 2)
了,或者说就变成25px
了。 简而言之:一个calc()
里面的calc()
就仅仅相当于是一个括号。