calc()中不能直接用padding值，因padding非数值单位；有效写法是用具体长度如calc(100% - 32px)或css变量calc(100% - 2 * var(--pad))，但需注意浏览器兼容性及box-sizing替代方案更健壮。
calc() 里不能直接用 padding 值
你写 width: calc(100% - padding) 是无效的——padding 不是数值，也不是 CSS 变量，它不是可计算的长度单位。浏览器会直接忽略整条声明，或报 invalid property value 错误。
真正能参与 calc() 的，只有带单位的数值：px、em、rem、%、vw 等，且必须是**已知的、静态可解析的值**。
- 如果你的
padding是固定值（如padding: 16px），就直接写calc(100% - 32px)（左右 padding 各 16px，共减 32px） - 如果 padding 来自 CSS 自定义属性（
--pad: 16px），可以写calc(100% - 2 * var(--pad))，但注意：IE 不支持var()，且乘法只在现代浏览器中有效 - 百分比 padding（如
padding: 5%）不能用于calc()减法，因为它的计算基准是父容器宽度，而width和padding的百分比基准逻辑不互通，强行混用会导致不可预测的收缩或溢出
替代方案：用 box-sizing + width: 100%
绝大多数场景下，你想要“内容区宽度 = 容器宽度 - 左右 padding”，其实根本不需要 calc()。
只需两步：
- 设置
box-sizing: border-box（推荐全局重置） - 把容器
width设为100%，再显式写padding
此时浏览器自动把 padding 算进 width 之内，内容宽度自然就是 100% - 左右 padding。这是标准盒模型行为，无兼容性问题，也无需计算。
示例：
.container {
width: 100%;
padding: 0 20px;
box-sizing: border-box;
}
需要动态响应 padding 变化时，优先用 CSS 自定义属性 + calc()
当 padding 会随断点或主题切换变化（比如暗色模式 padding 加大），又确实要靠 calc() 控制子元素宽度时，必须把 padding 提炼成变量。
- 定义统一变量：
:root { --pad-x: 16px; } - 容器自身用
padding: 0 var(--pad-x) - 子元素宽度写成：
width: calc(100% - 2 * var(--pad-x)) - 媒体查询中覆盖变量：
@media (min-width: 768px) { :root { --pad-x: 24px; } }
注意：Safari 15.4 之前不支持 calc() 中的乘除运算符（*、/），若需兼容旧 Safari，得写成 calc(100% - var(--pad-x) - var(--pad-x))。
flex 或 grid 容器通常根本不需要 calc()
如果你的“包含 padding 的容器”实际是布局容器（比如卡片、栏位），与其手动算宽，不如交由布局模型处理：
- 用
display: flex，子项设flex: 1，padding 放在容器上，内容自动撑满可用空间 - 用
display: grid，配合grid-template-columns: 1fr，同样无视 padding 干扰 - 这些方式天然隔离 padding 影响，代码更健壮，也避免因
calc()解析失败导致的布局塌陷
真正要警惕的是：把 calc() 当万能补丁去修 padding 导致的溢出，往往说明布局模型选错了。
padding 的语义是“内部留白”，不是“要从宽度里抠出来的硬边距”。算得越细，越容易掉进单位混用、浏览器差异、响应式断裂的坑里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
