calc()不支持直接使用border或padding等属性名，只接受具体数值或CSS变量；需显式写出尺寸或用var()传入，并注意双边距/边框需成对计算，单位混用有兼容性风险。
calc() 里不能直接用 border 或 padding 关键字
很多人写 calc(100% - border) 或 calc(100% - padding)，结果无效——calc() 不认识这些 CSS 属性名，它只接受具体数值（带单位）或已定义的自定义属性（var(--x)）。边框和内边距的尺寸必须显式写出或通过 CSS 变量传入。
常见错误现象：border: 2px solid #000; width: calc(100% - border); 完全不生效，浏览器直接忽略该声明。
- 必须把
border-width、padding-left等换算成具体值，比如calc(100% - 4px)（对应左右各 2px 边框） - 如果边框或内边距是动态的（如响应式变化），优先用 CSS 自定义属性 +
var()组合，例如：--border: 2px; width: calc(100% - 2 * var(--border)); - 注意盒模型：若元素是默认
box-sizing: content-box，width不包含border和padding，此时扣减的是内容区宽度；若设为border-box，则width已含内边距和边框，再扣会过小
左右内边距+双边框要成对扣除
横向布局中，真正影响可用内容宽度的是左+右的 padding 和 border 总和。单写 calc(100% - 10px) 很可能只扣了一边，导致内容溢出或留白异常。
使用场景：卡片容器需铺满父容器，但自身有 padding: 12px 和 border: 1px，又不想靠 box-sizing: border-box 解决（比如需要保留 content-box 行为做其他计算）。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
width: calc(100% - 2 * 12px - 2 * 1px);（左右 padding 各 12px，左右 border 各 1px） - 更可维护的写法：
--pad: 12px; --bd: 1px; width: calc(100% - 2 * var(--pad) - 2 * var(--bd)); - 别漏掉乘数：
padding: 10px 20px是上/下 10px、左/右 20px，横向扣减只关心20px × 2，和上下无关
calc() 中单位混用会报错
calc(100% - 10) 或 calc(100% - 10px + 1em) 在某些旧版浏览器（如 Safari 6–9）会直接失效，现代浏览器虽大多支持混合单位，但仍有兼容性风险和可读性问题。
错误信息：Invalid property value 出现在开发者工具的 Styles 面板中，对应行被划掉。
- 同一项运算中，建议统一单位：百分比与像素不要混在同一个加减项里，如
calc(100% - 20px)安全，但calc(50% + 1rem - 2px)在部分环境下不可靠 - 如需响应式适配，优先用
clamp()或媒体查询配合不同calc()值，而不是强行在单个calc()里塞多种单位 - 注意空格：
calc(100%-20px)（无空格）在部分浏览器中解析失败，必须写成calc(100% - 20px)
box-sizing: border-box 是更稳妥的替代方案
如果你只是想让元素“看起来”占满容器、同时保留内边距和边框，box-sizing: border-box 比反复写 calc() 更直接、性能更好、也更不易出错。
性能影响：每个含 calc() 的属性都可能触发重排（尤其是涉及百分比和视口单位时），而 box-sizing 是纯渲染层行为，无计算开销。
- 99% 的场景下，
*, *::before, *::after { box-sizing: border-box; }这条全局重置就解决了问题 - 只有当你需要精确控制 content-box 下的内容区域尺寸（比如 Canvas 绘图区域、textarea 行高计算），才值得动用
calc()手动扣减 - 记住：
calc()是兜底手段，不是首选；它容易因单位、括号、空格或变量未定义而静默失败
真正麻烦的从来不是怎么写 calc()，而是忘了它不感知 CSS 属性，也不自动识别方向——你写的每一个数字，都得自己核对是单边还是双边、是 px 还是 em、有没有被祖先元素的 font-size 影响。稍一走神，宽度就飘了。
