为何在CSS中执行简单运算仍需使用calc函数？

你说的完全没错，calc(10px + 100px)这种纯固定数值的运算确实是在复杂化代码——MDN里的这类示例只是为了最直白地演示calc的基本语法，根本不是实际开发中的推荐写法。

calc真正的价值体现在这些场景：

• 混合不同单位的运算：这是calc最核心的能力。比如你想让元素宽度占满父容器，同时左右各留20px的边距，直接写width: 100% - 40px会报错，但width: calc(100% - 40px)就能完美实现。再比如做自适应字体时，font-size: calc(16px + 0.5vw)可以让字体大小随视窗宽度平滑变化，这种固定像素加视窗单位的组合，只有calc能做到。

• 配合CSS变量实现动态复用：当你用CSS变量管理全局样式时，calc能让变量的灵活性拉满。比如定义--base-gap: 8px，然后在不同组件里用gap: calc(var(--base-gap) * 2)、margin: calc(var(--base-gap) + 4px)，后续只需要修改--base-gap这一个值，所有关联的样式都会自动更新，比手动逐个修改固定值高效太多。

• 用代码逻辑替代硬编码，提升可读性：有时候直接写固定数值不如用calc表达设计逻辑。比如你需要让一个弹窗的高度是内容区高度的一半再加10px，硬写50px虽然能实现，但用height: calc(var(--content-height) / 2 + 10px)的话，任何人看代码都能立刻明白这个高度的由来，后续内容区高度变化时也不用重新计算数值。

• 简化响应式逻辑：在响应式设计中，calc可以减少媒体查询的数量。比如width: calc(280px + 15%)，视窗大小变化时元素宽度会自动按比例调整，不用在多个断点里写不同的固定宽度值，让代码更简洁。

内容的提问来源于stack exchange，提问作者Michael36