box-sizing: border-box 仅控制单个元素的宽高计算方式，不解决布局上下文问题；常见无效场景包括父容器未预留空间、子元素内容过宽、绝对定位脱离文档流、svg元素不支持、flex/grid约束未放开（如缺min-width: 0）及第三方样式覆盖等。
box-sizing: border-box 为什么有时完全没用
因为 box-sizing 只管单个元素的尺寸计算逻辑，不干预布局上下文。它解决不了父容器没留空间、子元素内容本身过宽、或文本流/定位导致的溢出。
常见错误现象：overflow: hidden 压不住、width: 100% 的子元素仍挤出父容器、滚动条莫名出现、DevTools 里 computed width 明明是 300px，但视觉上就是撑破了。
- 父容器用了
display: flex但没设min-width: 0，子项内有长单词或 URL，flex 项拒绝收缩——这时加box-sizing: border-box毫无作用 - 子元素是
position: absolute，脱离文档流，它的溢出跟父元素的box-sizing完全无关 - 父容器写了
padding: 20px，子元素写width: 100%，结果子元素宽度 = 父内容区宽，再被 padding 挤出——这不是盒模型问题，是尺寸参照错了 - SVG 元素（如
<rect></rect>、<circle></circle>）根本不支持box-sizing，永远按 content-based 计算
哪些“溢出”根本不是 box-sizing 能管的
先看 computed style 里的 width 和 height 值是否已含 padding/border：如果 DevTools 中显示的是 300px（而非 260px），说明 border-box 已生效，那问题一定在别处。
-
white-space: normal下的空白符（换行、空格）造成 inline-block 或 flex 子项间间隙，误判为“内容溢出” - 文本未设置
word-break: break-word或overflow-wrap: break-word，一个超长 URL 直接撑爆容器 - 使用了
transform: scale(1.2)或zoom，视觉溢出但 layout 尺寸未变，box-sizing对渲染层缩放无效 - 第三方 UI 库（如 Ant Design）内部用了
!important覆盖你的box-sizing，比如.ant-input { box-sizing: content-box !important }
真正该用 calc() 或 min-width: 0 的时候
当 box-sizing 已生效，但元素还是溢出，大概率是布局系统本身的约束没打开。
- flex 子项同时写了
width: 100%和flex: 1，冲突；应删掉width，改用flex-basis或直接靠flex-grow - grid 子项设了
width: 200px+padding: 16px，而轨道是200px固定宽——border-box会让内容区缩到 168px，但若内容不可折行，依然溢出；此时该用grid-template-columns: 1fr或加min-width: 0 - 需要带 margin 的全屏容器：不用
width: 100%; margin: 16px，改用width: calc(100% - 32px); margin: 16px
全局重置 box-sizing 的实际代价
写 * { box-sizing: border-box } 是快，但上线后容易踩三个隐性坑：
- 老项目里有些样式靠「content-box 的膨胀」来对齐，比如手动把
width设成180px来抵消padding: 10px，重置后立刻错位 - Shadow DOM 内部样式不受全局规则影响，Web Component 里还得单独声明
- 某些 SVG 图表库（如 D3 封装的组件）会动态插入
<g></g>或<foreignobject></foreignobject>，这些节点不继承box-sizing，且无法用 CSS 控制
最常被忽略的，是 flex/grid 容器中那个不起眼的 min-width: 0 ——它不解决盒模型，却常常才是溢出的最后一道闸门。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
