不设 box-sizing: border-box 时，width: 100% 或 width: 200px 仅指内容区宽度，padding 和 border 会额外叠加导致总宽超限，引发溢出、换行或滚动条；必须全局设置 , ::before, *::after { box-sizing: border-box; } 并覆盖表单控件等特殊元素。
不设 box-sizing: border-box，你写的 width: 100% 或 width: 200px 就不是它最终占的宽度——padding 和 border 会额外加在外面，布局错位、换行、横向滚动条全是它直接导致的。
为什么 width 值总“不准”，其实是盒模型在捣鬼
浏览器默认用 content-box：你设 width: 200px，它只管内容区；再加 padding: 12px 和 border: 1px，实际占宽变成 200 + 24 + 2 = 226px。父容器没预留这 26px，子元素就必然溢出或换行。
- 两个
width: 50%的盒子并排，只要其中任意一个有padding或border，总宽立刻超 100%，直接变成两行 -
input[type="text"] { width: 100%; padding: 8px; }在content-box下必溢出，触发横向滚动条 - Flex 项写了
flex: 1还加了padding: 16px，结果内容区被压缩到负数宽度（尤其当父容器窄时）
全局设置必须带 *::before 和 *::after
伪元素是独立渲染节点，不继承父元素的 box-sizing。漏掉它们，::before 或 ::after 加了 border 或 padding 后会悄悄撑开容器，常见于 Tooltip、Badge、卡片阴影层等场景。
- 只写
* { box-sizing: border-box; }是不够的，*::before, *::after必须显式声明 - 某些旧版浏览器对伪元素继承支持不一致，显式声明更可靠
- 第三方 UI 库（如 Ant Design、Element Plus）可能用
!important强制content-box，需单独覆盖：.ant-btn { box-sizing: border-box !important; }
Flex/Grid 里它不是“加分项”，而是刚需
box-sizing 不影响 Flex 分配逻辑，但决定子项内部是否“撑开”。比如一个 flex: 1 的输入框，content-box 下加 padding 可能截断文字；border-box 下则不会。
- Grid 中
grid-template-columns: 1fr 2fr，加padding后仍能精准按比例分配空间 - 响应式断点中改
padding却不溢出，靠的就是border-box把内边距“锁”在设定宽度内 - 移动端小屏对像素误差更敏感，差 2px 就可能触发横向滚动条，
border-box是第一道防线
哪些地方容易被忽略，导致“设了也白设”
真正翻车的往往不是没加那行 CSS，而是这些细节没控住：
-
margin永远不参与box-sizing计算——它始终在盒子外部，别指望被“包含”进去 - 调试时别只看 Styles 面板里的声明，要去 Computed 面板确认
width值是否已含padding和border - 表单控件（如
input、textarea）在 Safari/IE 中常默认用content-box，不重置就容易错位，建议单独补一句：input, textarea { box-sizing: border-box; } - 某些老项目用了
transform: scale()或zoom，border-box不影响缩放逻辑，但padding/border会同比放大，可能造成像素模糊
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
