box-sizing: border-box 是响应式盒模型的起点，它使 width/height 包含 content、padding 和 border，避免 calc() 计算值被额外尺寸撑破；必须全局设置 、::before、*::after { box-sizing: border-box; } 以确保尺寸预期准确。
box-sizing: border-box 是响应式盒模型的起点
不设 box-sizing: border-box，用 calc() 算出来的宽高很容易被 padding 和 border 撑破。浏览器默认是 content-box，此时 width: calc(100% - 20px) 只控制内容区，加上内边距和边框后总宽度远超预期。
必须全局重置（尤其在响应式项目里）：
*, *::before, *::after {
box-sizing: border-box;
}
否则 calc() 的结果会和视觉表现错位，调试时容易误判是公式写错，其实是盒模型在“偷偷加料”。
calc() 中混用单位要小心单位类型冲突
calc() 不允许把无单位数值和带单位值直接相加减，比如 calc(100% - 10) 会失效——10 缺少单位，浏览器无法解析。
常见错误组合与修正方式：
-
calc(100% - 10)→ 错误：数字 10 无单位 -
calc(100% - 10px)→ 正确：单位一致（% 和 px 可混合，但必须都带单位） -
calc(50vw - 2rem)→ 正确：vw 和 rem 属于不同维度，但都是合法长度单位 -
calc(100% / 2 - 1em)→ 正确：支持四则运算，除法优先级高
特别注意：% 在不同上下文中基准不同（父容器宽 or 高），而 vh/vw 始终基于视口，混用时容易在窄屏或横竖屏切换时出偏差。
用 calc() 动态算高度时，别忘了 height: auto 的干扰
想让一个容器高度随内容 + 固定顶部栏自适应？写 height: calc(100vh - 64px) 很常见，但若子元素有 height: auto 或未设 min-height，实际高度可能小于计算值，留白；反之，若内容溢出又没设 overflow，就会撑破布局。
更稳妥的做法是结合约束条件：
- 父容器需有明确高度来源（如
html, body { height: 100%; }或min-height: 100vh） - 目标元素用
min-height: calc(100vh - 64px)而非height，允许内容撑高 - 配合
overflow-y: auto防止内容截断
例如侧边栏固定高头部后的主内容区：
.main-content {
min-height: calc(100vh - 80px);
overflow-y: auto;
}
响应式场景下 calc() 与媒体查询不是替代关系
有人试图用 calc(100% - var(--sidebar-width)) 代替媒体查询做响应式，但 CSS 变量无法在 @media 外动态响应视口变化——它只在声明时求值，不会随 resize 重算。
真正可靠的组合是：
- 用媒体查询切换断点下的
--sidebar-width值 - 再在常规样式中用
calc(100% - var(--sidebar-width)) - 避免在
calc()里嵌套媒体查询逻辑（语法不支持）
也就是说，calc() 是“算术工具”，不是“条件引擎”。它负责精确计算，响应逻辑仍得靠媒体查询或容器查询（@container）来驱动。
最易忽略的一点：flex 或 grid 容器内部，calc() 计算出的尺寸若与剩余空间冲突，浏览器会按 flex/grow 规则重新分配——这时候你以为的“刚性计算”其实已被弹性规则覆盖了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
