介紹

允許在聲明 CSS 屬性值時(shí)執(zhí)行一些計(jì)算。

它可以用在如下場合：<length>、<frequency>, <angle>、<time>、<percentage>、<number>、或 <integer>。

語法：

<calc()> = 
  calc( <calc-sum> )  

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*  

<calc-product> = 
  <calc-value> [ [ '*' | '/' ] <calc-value> ]*  

<calc-value> = 
  <number>         |
  <dimension>      |
  <percentage>     |
  <calc-constant>  |
  ( <calc-sum> )   

<calc-constant> = 
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN        

示例：

width: calc(100% - 80px);

代碼解析：
設(shè)置某個(gè)元素的寬度 是 其 父元素的寬度 減去 80px的 值。

CSS 變量嵌套使用calc()

示例：

.foo {
  --widthA: 100px;
  --widthB: calc(var(--widthA) / 2);
  --widthC: calc(var(--widthB) / 2);
  width: var(--widthC);
}

代碼解析：
在所有的變量都被展開后，widthC 的值就會變成 calc( calc( 100px / 2) / 2)，然后，當(dāng)它被賦值給 .foo 的 width 屬性時(shí)，所有內(nèi)部的這些 calc()（無論嵌套的有多深）都將會直接被扁平化為一個(gè)括號（原文：be flattened to just parentheses），所以這個(gè) width 屬性的值就直接相當(dāng)于 calc( ( 100px / 2) / 2) 了，或者說就變成 25px 了。簡而言之：一個(gè) calc() 里面的 calc() 就僅僅相當(dāng)于是一個(gè)括號。