《看完就懂系列》聊聊 CSS3 的 calc() 函数

写在前面

今天在 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()函数这部分知识点其实不多，只要明白用法，注意避坑就不会有问题。

原创不易，如有错误，欢迎指正。

如果有帮助到你，请给大冰块悄悄点赞关注，你的点赞关注就是我写下去的动力。

让我们一起在前端的路上进步吧~🤭