一、calc()是什么
简单来说就是CSS3中新增的一个函数，calculate（计算）的缩写。用于动态计算宽/高，你可以使用calc()给元素的各个属性设置值。
二、calc()的用法
- 可以混合使用各种单位进行计算；例如：%、vw、vh、px、vmin、vmax、em、rem等单位；
- calc()函数支持 "+", "-", "*", "/" 运算。使用标准的数学运算优先级规则。运算符前后都需要保留一个空格，例如：width: calc(100% - 10px);
- calc()函数支持嵌套，例如 calc( 100% / calc(2em * 5) )
三、calc()使用场景
使DOM元素更加灵活的响应视口改变。比如给定元素的宽高为视口的高度减去一个绝对值，它将随视口的改变而同样改变。如下代码：
width: calc(100vm - 10px);
height: calc(100vh - 10px);
// 设置一个100%宽度，10px间距的块
width: 100%;
margin: 10px; // 这样写会超出 出现滚动条
// 这时候就可以用calc()
width: calc(100% - (10 *2)px);
margin: 10px;
可读性更好，比如 width:33.3333% ；和 width:calc(100% / 3) ；修改起来也更方便。
绝对定位居中：实现等同于 marging-top: -50px; margin-left: -50px; 的效果。比如还需要设置margin属性的话，可避免样式冲突。
width: 100px;
height: 100px;
position: absolute;
top: calc(50% - 50px);
left: calc(50% - 50px);
四、less中的calc()
// 在less中是这么写的
width: calc(100% - 10px);
// 最后转换在页面上 变成了
width: 90%;
查了资料才知道：
在使用less解析中，calc运算会忽略单位自己计算：比如“width:calc(50% - 5em)” 会被解析为 “width:calc(45%)”。修改方法：width:calc(~"50% - 5em");
