使用calc()函数在CSS属性值时执行计算

在现实中，我们经常要动态调整相对整个画面的整体高度或者宽度

比如：我想设置一个div高度为整个屏幕的100% 再减去20px固定高度，这种如何实现呢？
我们就可以适合用calc()函数调整了。使用方法

/*实现了宽度为父容器宽度减去固定的20px*/
width:-webkit-calc(100% - 20px);
width:-moz-calc(100% - 20px);
width:calc(100% - 20px);

calc方法可以使用 加(+)减(-)乘(*)除(/)

• 注意：乘法，乘数中至少有一个是 number。
• 注意：除法，除数（/ 右面的数）必须是 number。

备注：

1. ‘+’ 和 - 运算符的两边必须要有空白字符。
2. ‘*’ 和 / 这两个运算符前后不需要空白字符。
3. 用 0 作除数会使 HTML 解析器抛出异常。
4. 涉及自动布局和固定布局的表格中的表列、表列组、表行、表行组和表单元格的宽度和高度百分比的数学表达式，auto 可视为已指定
5. calc() 函数支持嵌套，但支持的方式是：把被嵌套的 calc() 函数全当成普通的括号。（译者注：所以，函数内直接用括号就好了。）

参考文档：MDN web docs:https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc