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