calc()需配合box-sizing: border-box或显式减去padding/border；不响应视口变化，应优先用clamp()；在flex/grid中width常被忽略，宜用margin/gap或justify-self；嵌套过深或单位混用易失效。
calc() 里怎么处理 padding 和 border 导致的尺寸偏差
直接用 width: calc(100% - 20px) 很容易忽略盒模型默认是 content-box，这时候减去的 20px 只影响 content 宽度，但 padding 和 border 会额外撑开容器，实际总宽度超 100%。
- 要么统一设
box-sizing: border-box，让calc()的结果包含 padding 和 border - 要么在
calc()里显式减去padding-left + padding-right + border-left-width + border-right-width - 注意：
em、rem、%混用时，calc()内部单位不能直接相加减（如100% + 1rem合法，但100% - 1em在部分旧版 Safari 会失败）
响应式布局中 calc() 配合 minmax() 或 clamp() 的取舍
calc() 本身不响应，它只做一次计算；真要“随屏幕变”，得靠媒体查询或 CSS 函数联动。常见误用是以为 calc(100vw - 64px) 能自动适配移动端侧边栏——其实它只是静态减法，没判断侧边栏是否显示。
- 需要条件逻辑时，优先用
clamp(320px, 100% - 64px, 1200px)，它天然支持视口变化 -
minmax()适合 Grid 轨道定义，比如grid-template-columns: repeat(auto-fit, minmax(calc(300px - 1rem), 1fr)))) - IE 不支持
clamp()和minmax()中的calc()表达式，若需兼容，得回退到媒体查询 + 多组calc()
calc() 在 Flex 或 Grid 容器里的常见失效场景
Flex 项目设了 flex: 1 或 flex-grow: 1 时，width: calc(100% - 20px) 基本无效——因为主轴尺寸由 flex 算法决定，不是靠 width 控制。
- 想让某个 flex 项留白固定间隙，该用
margin或gap，而不是靠calc()算 width - Grid 中若列定义写成
1fr，再给子元素设width: calc(100% - 16px)也常被忽略，此时应改用justify-self: stretch+padding - 绝对定位元素用
left: calc(50% - 50px)居中没问题，但若父容器没设position: relative，计算基准就变成 viewport，容易偏移
性能和可维护性上容易被忽视的点
calc() 计算本身开销极小，但嵌套太深或频繁依赖动态值（比如 calc(100vh - var(--header-height) - env(safe-area-inset-bottom))）会让调试变困难，尤其当自定义属性或环境变量未定义时，整条声明会静默失效。
- 避免三层以上嵌套，如
calc(calc(100% / var(--cols)) - calc(2 * 1em))—— 拆成变量更清晰 - 用
var(--gap)替代重复的16px，既方便全局调整，也减少calc()里硬编码 - Chrome DevTools 的 computed 标签页里，失效的
calc()会显示为invalid value，但不会高亮哪部分出错，得手动检查单位混用或括号匹配
真正麻烦的不是写对 calc()，而是它和 box-sizing、flex、inheritance 这些机制交叉作用时，错误表现不直观，得一层层确认计算上下文。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
