box-sizing: border-box 是现代 css 布局的默认前提，因其使 width/height 包含 padding 和 border，避免尺寸计算混乱；全局重置需覆盖伪元素并继承，否则伪元素回归 content-box 导致布局失控。
box-sizing: border-box 是现代 CSS 架构中构建零冲突盒模型体系的起点，不是可选项，是默认前提。
为什么必须全局重置 box-sizing
不设 box-sizing: border-box，width 和 height 就永远在“猜尺寸”：加个 padding: 16px，200px 宽的卡片立刻变成 232px；换套 UI 库，它用 content-box，你的栅格就错位。浏览器默认是 content-box，但所有现代框架（Bootstrap、Tailwind、Ant Design）都强制覆盖它——这不是风格选择，是避免计算溢出的生存策略。
全局重置写法必须带通配符和继承兜底：
* {
box-sizing: border-box;
}
*::before,
*::after {
box-sizing: inherit;
}
漏掉 ::before/::after 会导致伪元素回归 content-box，比如用 border 画三角或加载动画时尺寸失控。
padding 与 margin 的职责边界必须物理隔离
常见翻车点：用 margin 控制组件内部文字距边框距离，结果父子元素一嵌套，margin-top 直接塌陷到父容器外；或者两个卡片用 margin-bottom 隔开，中间间距却是最大值而非累加。
-
padding只用于「内容呼吸空间」：按钮文字内边距、卡片内容区留白、表单控件内填空 -
margin只用于「组件间关系」：卡片与卡片之间、标题与正文之间、模块与模块之间 - 禁止在同一个元素上混用两者实现同一目的（比如既用
padding-top又用margin-top拉开顶部距离）
一旦越界，margin 塌陷、响应式断点错位、BFC 触发条件不可控等问题会成批出现。
如何让 border 不再参与布局扰动
border 在 border-box 下已不撑开尺寸，但它仍可能引发三类隐性冲突：
- 视觉误差：1px 实线在高清屏上渲染为 0.5px，导致边框“消失”或虚化 —— 改用
border: 1px solid transparent+outline或box-shadow替代 - 焦点状态干扰：表单元素
:focus加border会改变尺寸，触发重排 —— 统一用outline或box-shadow: 0 0 0 2px #007bff - 圆角裁剪异常：当
border-radius与border共存且内容溢出时，边缘锯齿或裁剪失效 —— 加overflow: hidden显式约束
真正鲁棒的边框，是视觉存在但布局静默的。
响应式场景下最易被忽略的陷阱
在媒体查询中改 padding 或 margin 很自然，但以下三点常被跳过：
- 所有涉及尺寸的响应式调整，必须同步检查
max-width/min-width是否与当前padding+border总和兼容，否则出现横向滚动条 - 使用
rem或em设置padding时，父级字体大小变更会连锁放大内边距 —— 关键区域优先用px或clamp() -
margin在 flex/grid 容器中行为不同：flex 项的margin: auto可居中，grid 项则需justify-self—— 不要假设通用
盒模型的鲁棒性，不体现在“能跑”，而体现在“换设备、换字体、换嵌套深度、换容器类型时，尺寸和间距依然可预测”。这要求每个 padding、margin、border 都有明确归属，且从不依赖默认行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
