<p>Bootstrap的* { box-sizing: border-box; }会引发错位，因其所有栅格列、表单控件均按border-box设计；一旦父容器或第三方组件将其改回content-box，子元素就会多出padding+border像素，导致整行超宽换行，且伪元素不继承该属性，易造成图标偏移。</p>
会冲突，而且冲突表现往往隐蔽、难定位——不是样式没生效，而是盒模型计算逻辑被悄悄改写了。
为什么Bootstrap的* { box-sizing: border-box; }会引发错位
Bootstrap 所有栅格列（如 .col-6）、表单控件（.form-control）、按钮（.btn）都按 border-box 设计：padding 和 border 不撑开总宽。一旦某个父容器或第三方组件把 box-sizing 改回 content-box，它的子元素（包括 .col-*）就立刻多出 padding + border 的像素，导致整行超宽、换行错位。
- 常见触发点：
<input>在旧版 Safari 默认是content-box；某些日期选择器、富文本编辑器会重置全局box-sizing - 验证方式：DevTools 选中错位的
.col-4→「Computed」面板看box-sizing值是否为border-box；如果不是，往上逐层检查父元素样式来源 - 特别注意：
::before/::after伪元素不继承box-sizing，即使父级设了border-box，它们仍按content-box计算，图标/装饰容易偏移
覆盖第三方组件的box-sizing必须精准，不能硬刷*
用 * { box-sizing: border-box !important; } 看似一劳永逸，但第三方 UI 库（如 Element Plus、Ant Design）通常在自己的 CSS 文件里也写了 !important，后加载的规则会赢，结果是你写的没生效，或者生效了却把按钮内边距压扁。
- 正确做法：定位到具体类名，比如
.el-input、.ant-btn、.daterangepicker，单独覆盖：.el-input, .el-input__inner { box-sizing: border-box !important; } - 如果组件用了 Shadow DOM（如某些 Web Components），外部样式完全无效，只能通过
:host或::part()调整 - 别对
body或html下手——这会把所有后代拖进border-box，包括那些依赖content-box行为的老代码
Bootstrap 4+ 已自带box-sizing: border-box，重复声明反而埋坑
Bootstrap 4 及以上版本自己就在 CSS 开头声明了 * { box-sizing: border-box; }。如果你项目入口又写一遍，表面没事，但一旦想局部回退（比如某块旧业务需 content-box），就会因权重相同而失败。
立即学习“前端免费学习笔记（深入）”；
- 推荐隔离方案：给需兼容旧逻辑的区域加命名空间类，如
.legacy-layout，再写.legacy-layout * { box-sizing: content-box !important; } - 检查是否重复引入：Vite + SCSS 项目里，
normalize.css和 Bootstrap 的重置可能被合并加载，box-sizing被声明两次，实际生效的是后加载的那份 - Safari 旧版对
<input>、<textarea>忽略box-sizing，得加容错：input, textarea { width: calc(100% - 2px); }
真正麻烦的从来不是改一行 CSS，而是改完之后发现某个下拉箭头偏了 2px、某段老代码的浮动布局突然塌陷——这些细节不报错，只悄悄错位。
