CSS calc() 函数

定义与用法

calc() 函数用于动态计算长度值。

1. + 和 - 运算符的两边必须要有空白字符。比如，calc(50% -8px) 会被解析成为一个无效的表达式，必须写成calc(8px + -50%)
2. * 和 / 这两个运算符前后不需要空白字符，但如果考虑到统一性，仍然推荐加上空白符

   用 0 作除数会使 HTML 解析器抛出异常

3. 涉及自动布局和固定布局的表格中的表列、表列组、表行、表行组和表单元格的宽度和高度百分比的数学表达式，auto 可视为已指定。
4. calc() 函数支持嵌套，但支持的方式是：把被嵌套的 calc() 函数全当成普通的括号。（所以，函数内直接用括号就好了。）
5. calc() 支持与 CSS 变量混合使用

实例 

#div1 {

        position: absolute;

        left: 50px;

        width: calc(100% - 100px);

        border: 1px solid black;

        background-color: yellow;

        padding: 5px;

        text-align: center;

} 

Calc 中的加减法与乘除法的差异

{

    font-size: calc(1rem + 10px);

    width: calc(100px + 10%);

}

可以看到，加减法两边的操作数都是需要单位的，而乘除法，需要一个无单位数，仅仅表示一个倍率：

{

    width: calc(100% / 7);

    animation-delay: calc(1s * 3);

}

Calc 的嵌套

calc() 函数是可以嵌套使用的，像是这样：

{
  width: calc(100vw - calc(100% - 64px));
}

此时，内部的 calc() 函数可以退化写成一个括号即可 ()，所以上述代码等价于：

{
  width: calc(100vw - (100% - 64px));
}

也就是嵌套内的 calc()，calc 几个函数字符可以省略。