盒模型是布局错位的直接原因，因content-box下padding和border向外扩展导致尺寸超出预期，全局设box-sizing:border-box可使width/height代表最终渲染尺寸。
盒模型是布局错位的根源，不是“相关”，而是直接原因
布局错位绝大多数时候不是写错了 flex 或漏了 gap，而是浏览器按标准盒模型（box-sizing: content-box）算出来的尺寸，和你脑子里想的“这个 div 就该占 300px 宽”对不上。比如：width: 300px; padding: 16px; border: 2px solid #000;，实际总宽度是 300 + 32 + 4 = 336px——多出的 36px 就是溢出、换行、滚动条、列不对齐的起点。
为什么加了 padding 或 border 就乱？因为它们默认“向外撑”，不从宽高中扣
在 content-box 下，padding 和 border 不是“挤进内容区”，而是从内容边缘往外扩展空间。这导致几个典型问题：
- 父容器
width: 100%，子元素也width: 100%+padding: 10px→ 实际超宽，横向滚动或挤压兄弟元素 - 并排三个
width: 33.33%的列，每个加padding: 12px→ 总宽远超 100%，最后一列掉行 - 表单控件（
input、select）默认content-box，width: 100%+padding后必然撑破容器 -
border-radius容器里放图片，图片有默认vertical-align: baseline，加上border后底部空白更明显
最有效解法：全局切到 border-box，再用现代布局兜底
不用反复手算 calc()，也不用给每个元素单独设 box-sizing。项目一开始就在 CSS 入口加这一句：
*,
*::before,
*::after {
box-sizing: border-box;
}
这样所有元素的 width 和 height 都代表“最终渲染尺寸”，padding 和 border 自动向内压缩内容区。之后再配合：
立即学习“前端免费学习笔记（深入）”；
- 横向排列用
display: flex+gap，别用float或inline-block - 网格布局用
display: grid，列宽用grid-template-columns: repeat(3, 1fr)，别硬写百分比 - 图片统一加
display: block消除基线空白 - 调试时打开 Chrome DevTools 的 “Show box model”，一眼看清 content/padding/border/margin 占比
容易被忽略的陷阱：框架组件、第三方库、重置样式没覆盖到的地方
即使你写了全局 box-sizing，有些情况仍会失效：
- 某些 UI 库（如旧版 Ant Design、Element UI）的组件内部强制设了
box-sizing: content-box，需额外覆盖 -
iframe、canvas、video等替换元素不受全局重置影响，要单独处理 - 使用
all: unset或all: initial会清掉box-sizing，得再补上 - 动态插入的 DOM（如通过 JS 创建的弹窗、提示框）若没走 CSS 入口，可能漏掉重置
真正稳的方案，是把 box-sizing: border-box 当作和 body { margin: 0 } 同等级的基础重置项——它不是“可选优化”，而是现代 CSS 布局的起始前提。
