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

ゝ一纸荒年。 2023-02-18 15:24 1阅读 0赞

先说问题：

### 在使用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()` 就仅仅相当于是一个括号。