语法：
calc() = calc(四则运算)
说明：
用于动态计算长度值。
需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100vw - 10px)
- 任何长度值都可以使用calc()函数进行计算(百分比、px、em、rem)；
- calc()函数支持 “+”, “-“, “*”, “/“ 运算；
- calc()函数使用标准的数学运算优先级规则；
实践：
height:calc(100vh - 10px);
height:calc(100% - 10px)vh 相对于视口的高度。视口被均分为100单位的vh。
width:calc(100vw - 10px);
width:calc(100% - 10px)vw 相对于视口的宽度。视口被均分为100单位的vw。
可以看一看这个教程，对于vh vw的解释的很好
http://www.zhangxinxu.com/wordpress/2012/09/new-viewport-relative-units-vw-vh-vm-vmin/
例子：三局平均分布的布局，中间间距为5像素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>calc</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.col-3 {
width: calc(100%/3 - 5px);
float: left;
margin-right: calc(5px*3 /2);
background: #eee;
color: #333;
height: 100px;
text-align: center;
margin-bottom: calc(5px*3 /2);
font-size: 18px;
line-height: 100px;
}
.col-3:nth-child(3) {
margin-right: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="col-3">1</div>
<div class="col-3">2</div>
<div class="col-3">3</div>
<div class="col-3">4</div>
</div>
</body>
</html>浏览器兼容性：
