calc()算width时padding撑出容器是因为box-sizing默认为content-box，width仅控制内容区，需设border-box才使width包含padding和border。
calc()算width时padding为什么总撑出容器？
因为默认 box-sizing 是 content-box，width: calc(100% - 20px) 只控制内容区宽度，后续的 padding 和 border 会额外叠加——结果就是视觉上“没生效”，实际是溢出了。
必须显式设置 box-sizing: border-box，让 width 的计算结果包含 padding 和 border。否则 calc 就只是在 content 层面做减法，和你肉眼看到的“总宽度”完全不是一回事。
-
* { box-sizing: border-box; }是最稳妥的全局兜底写法，避免漏掉某个元素 - 单独给目标元素加也行，但容易遗漏：比如
.card { width: calc(100% - 40px); padding: 20px; box-sizing: border-box; } - 旧项目里如果已有大量
content-box逻辑，改box-sizing可能引发连锁布局偏移，建议先用 devtools 检查 computed 值确认当前行为
padding 能不能直接用 calc()？
不能写 padding: calc(100% - 20px) —— 这条声明会被浏览器直接丢弃，开发者工具里显示为带删除线的灰色，控制台也不报错，非常隐蔽。
原因：CSS 规范中 padding 的复合属性（如 padding、padding-block）不接受百分比值（除 padding-top/padding-bottom 在某些块级上下文中按包含块高度解析外），而 calc() 返回值若含非法单位组合，整条规则作废。
立即学习“前端免费学习笔记（深入）”；
- ✅ 单侧可用：
padding-left: calc(5% + 8px)（注意空格）、padding-inline-start: calc(2vw + 4px) - ❌ 复合写法全挂：
padding: calc(10% + 10px)、padding-block: calc(5vh)都无效 - ⚠️ 单位混用风险高：
calc(1rem + 5%)在 Safari 15.6 之前基本不渲染，现在虽部分支持，但基准不统一，结果不可靠
怎么算出真正“占满父容器”的宽度？
关键不是只减 padding，而是把所有横向占用项一次性列全：左右 padding + 左右 border + 左右 margin（如果存在）。
例如一个卡片有 padding: 16px、border: 2px solid #ccc、margin: 0 8px，那么内容区宽度应为：
width: calc(100% - 32px - 4px - 16px); /* 16*2 + 2*2 + 8*2 */
更清晰的写法是分步拆解，提高可维护性：
width: calc(100% - (16px * 2) - (2px * 2) - (8px * 2));- 或用 CSS 自定义属性提前定义：
--pad: 16px; --bd: 2px; --mar: 8px;，然后width: calc(100% - (var(--pad) * 2) - (var(--bd) * 2) - (var(--mar) * 2)); - 别忘了加
box-sizing: border-box，否则上面所有计算都白搭
兼容性和降级怎么处理？
IE9+、Chrome 19+、Firefox 4+、Safari 6.1+ 原生支持 calc()，但旧安卓 WebView 和部分 iOS 8–10 Safari 对 calc() 中的乘除运算或单位混用支持不稳定。
- 基础减法（
100% - 20px）兼容性最好，可放心用；复杂表达式建议加前缀：width: -webkit-calc(100% - 20px); width: calc(100% - 20px); - 降级方案不是靠前缀，而是层叠：先写静态 fallback 值，再覆盖 calc 表达式，浏览器不识别 calc 就用前面的值
width: 80%;<br>width: calc(100% - 40px);
- Less/Sass 中需转义：
width: ~"calc(100% - 40px)";或width: e("calc(100% - 40px)");，否则预处理器会提前求值
真正容易被忽略的点是：calc() 的结果是静态的，它只在样式解析时计算一次，不会随视口 resize 动态重算——所以不要指望它替代媒体查询做精细断点控制。
