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