这是大冰块2021年第11篇原创文章，和大冰块一起在前端领域努力吧！！！💪
写在前面
今天在less里面用到了CSS3的calc()函数，很久不用，先是把运算符前后的空格给漏掉了，还好我及时发现。然后编译结束的运行，UI竟然说界面展示不对，我仔细一瞅，好像真有些不对劲。
有句用到calc()函数的css代码是这样写的：
width: calc(100% - 10px);
编译结束代码变成了这样：
width：90%;
当时我是这样的：
查了资料才知道：
在使用less解析中，calc运算会忽略单位自己计算：比如“width:calc(50% - 5em)” 会被解析为 “width:calc(45%)”。
修改方法：width:calc(~"50% - 5em")
知道的还是太少啊，那就重新再看看calc()函数好了。看得多了以后遇到问题也不慌，即使没看出什么，也能安慰自己：温故而知新嘛~
calc()用法
- 运算符前后都需要保留一个空格，例如：
width: calc(100% - 10px);而不是`width: calc(100%-10px)。 - 任何长度值都可以使用calc()函数进行计算。例如%、vw、vh、px、vmin、vmax、em、rem等单位；
- calc()函数支持 "+", "-", "*", "/" 运算。
- calc()函数使用标准的数学运算优先级规则。
- calc()函数支持嵌套，例如
calc( 100% / calc(2em * 5) )
calc()使用场景
使DOM元素更加灵活的响应视口改变。比如给定元素的宽高为视口的高度减去一个绝对值，它将随视口的改变而同样改变。如下代码：
width: calc(100vw - 50px);
height: calc(100vh - 50px);
可读性更好，比如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);
写在后面
calc()函数这部分知识点其实不多，只要明白用法，注意避坑就不会有问题。
这是大冰块《看完就懂系列》的第8篇文章，《看完就懂系列》旨在把一些常见的概念或方法以通俗易懂的方式呈现出来。欢迎大家点击其他文章一起讨论学习：
- 《看完就懂系列》答应我，看完就开始用Symbol好吗？
- 《看完就懂系列》谈谈数据埋点的原理与实现
- 《看完就懂系列》Ajax是不是凭一己之力造就了整个前端的生态圈？
- 《看完就懂系列》项目中的权限管理复杂吗？
- 《看完就懂系列》天哪！搞懂节流与防抖竟简单如斯~
- 《看完就懂系列》15个方法教你玩转字符串
- 《看完就懂系列》字符串截取方法substr() 、 slice() 和 substring()之间的区别和用法
原创不易，如有错误，欢迎指正。
如果有帮助到你，请给大冰块悄悄点赞关注，你的点赞关注就是我写下去的动力。
让我们一起在前端的路上进步吧~🤭
