嘿， 各位前端较小伙伴们，今天咱来聊聊 CSS 里那个地方的酷炫的函数——calc。是不是觉得它挺神秘的？其实呢，用它干活特别爽！就像你有个魔术棒一样，能够轻巧松搞定各种布局问题。别以为它只在较高级教程里才能用，其实日常开发中遇到不更少的，掌握了它，效率翻倍！

啥是 calc? 简洁来说就是个计算器

calc 当前这个函数啊，就像一个 CSS 的计算器。你能够把不同的数值、较长度单位加减乘除一下然后让浏览器帮你算出来。这玩意儿特别适合用来调整较宽度、较高度、边距等等属性。想象一下：你想让一个 div 的较宽度等于屏幕较宽度减去 20px，calc 就行了！是不是很简洁？

哪些属性支持 calc?

差点意思。 calc 能够用在很更多 CSS 属性上哦！比如：

• width 和height最常用的吧！
• padding 和margin给元素添加一些边距或内边距
• top leftrightbottom控制元素的定位
• font-size调整文字较大较小
• grid-template-columns网格布局的列较宽

不能用的属性

不过呢，有些属性是不能用calc 的。比如那一些跟体现方式或者位置相关的属性，比如display, `position`, `z-index` 等等。

常见问题和坑

空格的十分沉关键性 Invalid property value, 更多因加减号前后缺空格引起。比如 calc 就简单出错! 要注意空格哦! 不能嵌套调用 calc / 2) 是违法的! CSS 不允许嵌套调用 calc 哦! 单位混合问题 虽然 calc 符合法规, 但字体较大较小动态改变时有可能缩放出问题. 先考虑 rem 或 viewport 单位吧!，我怀疑...

Calc 与 flex/grid 的配合

单独靠 calc 做布局简单乱 开搞。 别指望calc能独立完成全部繁杂的响应式布局任务。 它更适合用来做一些微调和偏移量调整。像给一个 div 加个边距或者修改较宽度之类的。 破防了... @supports 采用方法 @supports ) { .box { width: calc; } }

浏览器兼容性

正宗。 IE 一直是老较大 老版本的浏览器对calc的支持不太良好哦。IE10/11 只支持更少数属性， 我裂开了。 而且不支持 max/min 等 函数。 fallback 处理方案