CSS calc函数的介绍和使用 ​

​

一、介绍 ​

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()**就仅仅相当于是一个括号。

参考 ​

• calc()