box-sizing: content-box 是换行的根源，因 width 仅指内容区，border 和 padding 会额外叠加导致总宽超限；全局设 * { box-sizing: border-box } 可解决，但需注意 margin、伪元素、img 等仍不受控。
因为 width: 100% 在默认 box-sizing: content-box 下只管内容区，border 和 padding 会额外叠加到总宽上，导致实际占用宽度超过父容器可用空间——浏览器只能把后续元素挤到下一行。
box-sizing: content-box 是换行的根源
浏览器默认用 content-box 解析尺寸：width: 100% 指的是内容区占满父容器 content width，不包含 padding 和 border。一旦加了 border: 1px solid，实际 border-box 宽度就变成 100% + 2px；两个并排的 width: 50% 元素各加 border 后，总宽轻松突破 100%，必然换行。
验证方法：打开 DevTools，选中出问题的元素，在 Computed 面板里查 box-sizing 值——若显示 content-box，就是它。
为什么 Bootstrap 栅格加 border 就崩
Bootstrap 的 .col-* 类自带左右 padding（如 0.75rem），你再加 border，在 content-box 下等于三重叠加：内容宽 + padding × 2 + border × 2。两列 .col-md-6 原本各占 50%，加完后可能变成 50% + 2px，总和超限即换行。
-
* { box-sizing: border-box }必须全局生效，否则局部覆盖会被祖先级content-box覆盖 - 某些 UI 库或富文本编辑器会偷偷重置
box-sizing，尤其旧 Safari 对input默认仍是content-box -
.row的负margin（如-15px）本该抵消.col-*的padding，但若.row自身是content-box，这个抵消逻辑就失效
float 或 inline-block 下更难察觉
浮动或内联块元素对空隙极其敏感：content-box 下，width: 33.333% 的三列，只要任意一列有 padding: 8px 和 border: 1px，实际宽度就变成 33.333% + 18px，三列总和远超 100%。
调试技巧：
- 用 DevTools 直接看每个元素的
border-box width（Computed →width行右侧的括号值），和父容器width对比 - 临时加
outline: 1px solid red，一眼看出是否“凸出来” - HTML 源码中的换行符会在
inline-block元素间插入约 4px 空隙，此时calc(33.333% - 8px)比死守百分比更可靠
box-sizing: border-box 不是万能解药
设成 border-box 后，width 包含了 padding 和 border，但 margin 仍额外计算；HTML 空白字符、伪元素、替换元素（img、iframe）也都不受其控制。
容易被忽略的点：
-
*::before和*::after也必须显式纳入box-sizing重置，否则它们的content-box行为可能撑破布局 -
img即使父容器width: 100%且box-sizing: border-box，也会按原始尺寸渲染——必须加max-width: 100%; height: auto; - Flex 项写
flex: 1后再加padding，内容区可能被压缩到负宽度（尤其窄屏时），box-sizing对 flex 计算无直接影响
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
