使用calc不管用時，需要注意的坑

先說問題：

在使用calc時，使用的格式如下：width:calc(100%-100px); 結果不管用，改成 width:calc(100% - 100px);  即可管用（減號左右要有空格纔行）；

•  
• + 和 - 運算符的兩邊必須要有空白字符。比如，calc(50% -8px) 會被解析成爲一個無效的表達式，解析結果是：一個百分比 後跟一個負數長度值。而加有空白字符的、有效的表達式 calc(8px + -50%) 會被解析成爲：一個長度 後跟一個加號 再跟一個負百分比。
• * 和 / 這兩個運算符前後不需要空白字符，但如果考慮到統一性，仍然推薦加上空白符。
• 用 0 作除數會使 HTML 解析器拋出異常。
• 涉及自動佈局和固定佈局的表格中的表列、表列組、錶行、錶行組和表單元格的寬度和高度百分比的數學表達式，auto 可視爲已指定。
• calc() 函數支持嵌套，但支持的方式是：把被嵌套的 calc() 函數全當成普通的括號。（譯者注：所以，函數內直接用括號就好了。）

例子（減號，加號，除號）：

.banner { 
  width: calc(100% - 80px); 
  //  width: calc(100% + 6px);
  //   width: calc(100% / 6);
}

使用css變量嵌套使用：

.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()（無論嵌套的有多深）都將會直接被扁平化爲一個括號（原文：be flattened to just parentheses），所以這個 width 屬性的值就直接相當於 calc( ( 100px / 2) / 2) 了，或者說就變成 25px 了。 簡而言之：一個 calc() 裏面的 calc() 就僅僅相當於是一個括號。