calc()不能用于padding属性（除单侧且单位明确外），因padding不接受百分比值，浏览器直接丢弃该声明；必须配合box-sizing:border-box才能使width计算结果包含padding和border，否则calc仅作用于content宽度导致溢出。
calc() 能混合算 width、padding、border、margin，但必须和 box-sizing: border-box 配合，否则结果会因盒模型解释不同而错位。
为什么 calc(100% - 20px) 用在 padding 上经常“没反应”？
因为 padding 属性本身不接受百分比（除 padding-top/padding-bottom 在某些上下文中按包含块高度计算外），写 padding: calc(100% - 20px) 是非法的——浏览器直接丢弃整条声明，开发者工具里该行会带删除线，但控制台不报错。
- 合法场景仅限：支持长度值的属性，如
width、height、margin、top、font-size等 -
padding和border的复合写法（如padding-left）可接受calc()，但必须是单侧，且单位明确 - 想让内边距随容器缩放？改用
padding-inline: calc(5% + 10px)（现代浏览器支持），或退而求其次用媒体查询 + 固定值
box-sizing 没设成 border-box 时 calc 宽度会“多算一遍”
默认 box-sizing: content-box 下，width: calc(100% - 20px) 只控制内容区宽度，再叠加 padding 和 border 就必然溢出。你看到的“没生效”，其实是盒模型把 calc() 结果当成了 content 宽度，而非最终占位宽度。
- 必须显式写
box-sizing: border-box，否则calc()算出来的值会被 padding/border 推出去 - 建议全局重置：
* { box-sizing: border-box; }，避免漏掉某个元素 - Flex/Grid 项目中，即使写了
box-sizing，仍可能被flex-grow或grid-column覆盖 width —— 此时需加flex: none或min-width: 0
混合单位计算时哪些组合实际不可靠？
calc() 允许混用单位，但不是所有组合都跨浏览器稳定。尤其涉及 rem 和视口单位时，Safari ≤15.4、旧版安卓 WebView 常静默失败。
立即学习“前端免费学习笔记（深入）”；
- ✅ 安全组合：
calc(100% - 20px)、calc(100vw - 32px)、calc(50vh + 1em) - ⚠️ 风险组合：
calc(100% - 2rem)（rem依赖:root字体大小，JS 动态改后虽能响应，但初始渲染易偏差） - ❌ 失效组合：
calc(100% - 2 rem)（单位前有空格）、calc(100%-20px)（加减号无空格）、calc(1rem * 2)（乘法两边带单位） - 移动端慎用
100vw减固定像素：它含滚动条宽度（Mac 隐藏时为 0，Windows 常驻约 16px），容易导致左右溢出
和 CSS 变量一起用时最容易漏掉 fallback
calc(var(--gap) * 2) 看似简洁，但只要 --gap 未定义、为空或单位缺失（比如只设了 8 没写 8px），整条 calc() 声明就失效，且无提示。
- 务必写 fallback：
width: calc(100% - var(--sidebar-width, 240px)); - 变量作用域要窄，别全堆在
:root；多个组件共用同名变量时极易互相覆盖 - 括号不能省：
calc((100% - 20px) / var(--count))，否则除法优先级高，先算20px / var(--count)，结果大概率 NaN - 避免嵌套
calc(calc(...))：IE 完全不支持，部分安卓 WebView 解析异常
最常被忽略的一点：calc 不是“实时监听器”，它只在样式解析或触发重排时计算一次。所谓“动态”，本质是靠视口变化、父容器尺寸变动、CSS 变量更新这些外部事件驱动重算——没有这些，再复杂的表达式也只是个静态值。
