box-sizing 默认 content-box 导致宽高计算偏差，width 仅含内容区，padding 和 border 额外撑开；margin 合并使相邻块级元素垂直 margin 取最大值；内联元素不响应 width/height，需设 inline-block 或 block；flex/grid 中 width/height 行为受布局算法接管。
box-sizing 默认值导致的宽高计算偏差
绝大多数开发者默认用 width 和 height 指定元素大小，却没意识到浏览器默认是 box-sizing: content-box——这时设置的 width 仅包含内容区，padding 和 border 会额外撑开容器，造成布局错位或溢出。
- 常见现象：给一个
width: 200px的按钮加padding: 10px和border: 2px solid后，实际占宽变成224px，破坏栅格对齐 - 修复方式：全局重置（推荐）：
* { box-sizing: border-box; }或针对具体组件显式声明
box-sizing: border-box - 注意：某些第三方 ui 库（如早期 bootstrap）已自行重置，重复设置可能干扰其样式逻辑
margin 合并（Margin Collapse）引发的意外空白
相邻块级元素的垂直 margin 不会叠加显示，而是取较大值——这个机制在嵌套、列表、标题段落中极易造成“莫名多出/少了一截空白”。
- 典型场景：
h2后紧跟p，两者都有margin-bottom: 20px和margin-top: 20px，实际只显示 20px 空白而非 40px - 触发条件：必须是**普通文档流中的块级元素**，且处于同一 BFC（块级格式化上下文）内；浮动、绝对定位、
display: inline-block元素不参与合并 - 常用解法：
/* 方案1：触发新BFC */nsection { overflow: hidden; }nn/* 方案2：只设单边margin */np { margin: 20px 0 0 0; }nn/* 方案3：用 padding 替代 margin（需确认语义是否合理） */
内联元素的盒模型表现异常
span、a 这类内联元素不响应 width/height，padding 和 margin 的垂直方向也常被忽略或表现诡异（比如 margin-top 对父容器无影响），本质是它们的盒模型受行框（line box）约束。
- 错误写法：
span { width: 100px; height: 30px; }—— 完全无效 - 正确思路：需先转为块级或内联块：
span.icon { display: inline-block; width: 24px; height: 24px; }n/* 或 */nspan.badge { display: block; margin: 0 auto; } - 特别注意：
vertical-align会影响内联盒的基线对齐，进而改变周围行高的视觉间距，调试时建议先统一设为vertical-align: top排除干扰
flex/grid 容器中传统盒模型规则部分失效
当元素成为 flex item 或 grid item 后，width/height 的行为会受弹性/网格算法接管，margin: auto 可能居中，min-width: 0 常被忽略导致文字溢出，这些都不是 bug，而是规范定义的行为。
立即学习“前端免费学习笔记（深入）”；
- 典型问题：
flex: 1的子项内含长文本，未设min-width: 0导致父容器被撑宽甚至换行 - 关键调整：
.flex-item {n min-width: 0; /* 允许 flex item 收缩到内容最小宽度 */n overflow: hidden;n text-overflow: ellipsis;n} - 另一个坑：
margin: auto在 flex 容器中可实现真正的居中（包括垂直），但若同时设置了align-self，后者会覆盖margin: auto的垂直居中效果
盒模型本身很简单，但它的规则和上下文强耦合——display 类型、position 状态、父容器的格式化上下文，任何一个变量变了，表现就可能完全不同。调试时别只盯着 width 和 padding，先确认当前元素所处的渲染上下文。