全局重置 、::before、*::after 的 box-sizing 是唯一可靠起点，因 box-sizing 不继承，局部设置易失效；需单独声明表单控件并处理第三方库覆盖、伪元素及 css-in-js 注入顺序。
全局重置 *、*::before、*::after 的 box-sizing 是唯一可靠起点，否则任何局部设置都大概率失效。
为什么只写 html, body { box-sizing: border-box } 没用
box-sizing 不继承，父元素设了对子元素完全无影响。你看到卡片标题被切掉、输入框横向滚动、按钮被挤到下一行，根本原因就是子元素（比如 input、.card-header）仍按默认的 content-box 计算：写 width: 100% + padding: 12px + border: 1px，实际占宽 = 100% + 24px + 2px。DevTools 里看父容器“明明够宽”，但子元素早悄悄撑出去了。
- 必须用通配选择器覆盖所有基础节点，包括伪元素——它们常被用于清除浮动或绘制装饰，漏掉一个就可能在某个页面角落引发溢出
-
*:not(img)这类排除写法危险，svg、iframe的 wrapper 层也容易被漏掉 - 第三方 UI 库（如 Vant、Ant Design）可能用
!important强制回content-box，得用更具体选择器覆盖，例如input.van-field__control { box-sizing: border-box !important; }
input、textarea、select 必须单独加声明
Safari 和部分安卓 WebView 中，表单控件根本不继承父级 box-sizing 设置。哪怕你写了全局重置，input[type="search"] 在 iOS 上仍默认是 content-box，导致搜索框右侧总多出几像素，触发横向滚动条。
- 显式加一条：
input, textarea, select { box-sizing: border-box; } - 特别注意
input[type="range"]和自定义file按钮，它们的内部 shadow DOM 可能绕过样式，需额外用::-webkit-inner-spin-button等伪元素微调 - 如果用了 CSS-in-JS（如 styled-components），确保重置样式注入顺序在最顶部，否则 SSR 首屏可能闪动
fit-content + padding 组合最容易翻车
width: fit-content 看似安全，但它不改变盒模型逻辑。有 padding 或 border 时，实际宽度 = fit-content 结果 + padding × 2 + border × 2。更麻烦的是它对长 URL 或 base64 字符串完全不换行，直接拉伸整行。
- 必须搭配
box-sizing: border-box，否则 padding/border 永远外扩 - 长文本场景（如
div[contenteditable]、pre）要加word-break: break-word或overflow-wrap: break-word - 避免同时写
width: fit-content和white-space: nowrap，后者会让前者彻底失效
Flex/Grid 容器里子项仍溢出？别只盯 box-sizing
现代布局引擎下，box-sizing: border-box 生效后，溢出往往来自收缩逻辑而非尺寸计算。比如 input 默认 min-width: auto，在 flex 容器中死活不缩小；又或者 gap 被误当成 margin，导致间隙叠加。
- 给可能撑开的子项加
min-width: 0，尤其含文本、图片、表单控件的 flex item - 用
gap替代margin控制间距，margin会参与尺寸计算，gap不会 - 检查
Computed面板里目标元素的box-sizing值——不是看你写了没，而是确认浏览器最终解析的是border-box
真正难缠的从来不是 box-sizing 本身，而是它生效后暴露出来的深层问题：未约束的替换元素、被忽略的伪元素、第三方库的样式劫持、以及 flex/grid 分配规则和盒模型之间的隐式耦合。每次改完重置，务必进 DevTools 点开「Computed」逐个验证关键节点，而不是相信“应该没问题”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
