什么是calc()?
calc()是CSS3的一个新功能，能够动态地计算长度值，任何长度值都可以使用calc()来计算。你可以给一个div元素，使用百分比、em、px和rem单位值计算出其宽度或者高度，比如“width:calc(50% + 2em)”，这样一来你就不用考虑元素DIV的宽度值到底是多少，而把这个烦人的任务交由浏览器去计算。
（在使用的时候应当注意运算符前后都应该保留空格，尽管*和/这两个运算符并不需要保留空格，但是为了习惯最好加上。）
语法
除了移动端的浏览器之外，目前大多数的浏览器都对calc()有较好的兼容性，但是依旧要在前面添加前缀，例如：
兼容性使用
在calc()中，我们可以混合绝对单元与相对单元，比如：
结合相对于绝对单元的用法
使用calc()时，计算值是表达式自己，而非表达式的结果，当使用CSS预处理器做数学运算时，给定值为表达式的结果。
然后浏览器解析的calc()的值为真实的calc()表达式
我们可以使用calc()来实现元素的垂直居中
而典型的解决方法是使用负外边距移动自身距离高与宽的一半
实际上calc()还有很多的实际用法，这里只是举一下例，欢迎补充
CSS3 calc()
原文地址：https://www.cnblogs.com/runhua/p/9566246.html