介紹
允許在聲明 CSS 屬性值時(shí)執(zhí)行一些計(jì)算。
它可以用在如下場(chǎng)合：<length>凰棉、<frequency>, <angle>损拢、<time>、<percentage>撒犀、<number>福压、或 <integer>。
語(yǔ)法：
<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);
}
代碼解析：
在所有的變量都被展開(kāi)后荆姆，widthC 的值就會(huì)變成 calc( calc( 100px / 2) / 2)，然后映凳，當(dāng)它被賦值給 .foo 的 width 屬性時(shí)胆筒，所有內(nèi)部的這些 calc()（無(wú)論嵌套的有多深）都將會(huì)直接被扁平化為一個(gè)括號(hào)（原文：be flattened to just parentheses），所以這個(gè) width 屬性的值就直接相當(dāng)于 calc( ( 100px / 2) / 2) 了诈豌，或者說(shuō)就變成 25px 了仆救。簡(jiǎn)而言之：一個(gè) calc() 里面的 calc() 就僅僅相當(dāng)于是一個(gè)括號(hào)。
