CSS3 的 calc() 函数允许我们在属性值中执行数学操作。例如，我们可以使用 calc() 指定一个元素宽的固定像素值为多个数值的和。
2. 实现居中效果
使用 calc() 给我们提供另一个垂直居中元素的解决方案。如果我们知道元素的尺寸，一个典型的解决方案是使用负外边距移动自身距离高与宽的一半
3. 创建根栅格尺寸
使用 rem，calc() 函数能够用来创建一个基于视口的栅格。我们可以设置根元素的字体大小作为视口宽度的一部分。
4. 提高计算清晰度
使用 calc()，我们还能做很多的事情，它是 CSS 中很有用的新特性之一。
calc() 函数属于CSS3版本内容，用于动态计算长度值。例如：width: calc(100% - 10px)；需要注意的是，运算符前后都需要保留一个空格。calc()函数支持 "+", "-", "*", "/" 运算；
举例，给一个div动态设置宽度如下:
vh，是指css中相对长度单位，表示相对视口高度（Viewport Height），1vh = 1% * 视口高度。
视口比例长度定义了相对于视口的长度大小，这是文档的可见部分。
通俗点讲，vh就是当前屏幕可见高度的1%，也就是说 height:100vh == height:100%
