必须使用 box-sizing: border-box，否则带边框的百分比卡片会因 content-box 下 width 不含 padding/border 导致实际宽度超限而换行；全局应设 , ::before , *::after { box-sizing: border-box; }，并注意 SVG、原生控件及 JS 尺寸计算的适配。
必须用 box-sizing: border-box，否则带边框的百分比卡片必然换行、错位或溢出——这不是兼容性问题，是盒模型计算逻辑的根本差异。
为什么 width: 33.333% 加 border 就撑破一行
浏览器默认用 content-box 解析尺寸：你写 width: 33.333%，它只管内容区；再加 padding: 12px 和 border: 1px solid，实际宽度变成 33.333% + 24px + 2px。三张卡加起来远超 100%，自然换行。
常见错误现象包括：
- 栅格最后一列掉到下一行
-
overflow: hidden压不住横向滚动条 - Flex 容器中
flex: 1子项内容被压缩到负宽度
全局设置 box-sizing 的最小安全写法
不能只写 html { box-sizing: border-box; }，因为子元素不继承该属性；也不能漏掉伪元素，否则 ::before/::after 生成的内容仍走 content-box，悄悄破坏 tooltip 或 badge 布局。
正确写法只有这一种（现代项目可省略前缀）：
*,
*::before,
*::after {
box-sizing: border-box;
}
这条规则必须放在所有自定义样式之前，否则会被后续声明覆盖。第三方 UI 库（如 Ant Design）若用 !important 强制 content-box，需单独覆盖：.ant-card { box-sizing: border-box; }。
带边框卡片的栅格宽度怎么算才不翻车
box-sizing: border-box 不自动帮你算对数值，它只是让“你写的值 = 实际占位”。旧习惯里靠“多留 content 宽度抵 padding”会失效，必须显式校准。
关键实操建议：
- 用百分比设
width，别混用px和%（比如width: calc(33.333% - 2px)是反模式，2px在不同屏幕下意义不稳定） -
border必须写全三元组：border: 1px solid #ccc，避免只写border: 1px导致颜色/样式继承异常 - 响应式断点中，手机端务必写
float: none（如果用了 float），否则残留浮动会撑高父容器 - hover 边框闪烁？初始用
border: 2px solid transparent预留空间，或改用box-shadow: 0 0 0 2px #ccc
SVG 和某些原生控件不认 box-sizing
box-sizing，尺寸永远按 content-based 计算。同理，input[type="search"] 等少数原生控件内部渲染可能受 box-sizing 干扰，若发现搜索框内边距异常，可对它单独重置：input[type="search"] { box-sizing: content-box; }。
真正容易被忽略的是：JS 动态读取 offsetWidth 或 getBoundingClientRect() 的代码，若原先按 content-box 逻辑编写，切换后必须同步检查是否需要调整计算方式——比如原来减 padding * 2，现在可能直接用 clientWidth 更稳妥。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
