bootstrap 5的reboot.css是强制归一化浏览器默认行为的底层规则，重置h1–h6的margin-top、ul/ol的padding-left、button的overflow/cursor、img的max-width、表单控件appearance等关键默认值，且必须在所有自定义css前加载以保障box-sizing和line-height等基础一致性。
Bootstrap 5 的 CSS Reset（即 reboot.css）不是“可选美化”，而是强制归一化浏览器默认行为的底层规则——旧页面样式乱，往往是因为它直接覆盖了你依赖多年的原生渲染逻辑，比如 h2 的默认 margin-top、ul 的 padding-left、button 的 cursor 和 overflow 行为。
reboot.css 会重置哪些你根本没意识到的默认值
它不只清 margin/padding，而是系统性干预盒模型、字体链、表单控件和伪元素。常见被静默覆盖的点包括：
-
h1–h6全部设margin-top: 0，旧页面靠h3默认上边距撑开标题间距，现在直接贴顶 -
ul、ol的padding-left: 40px被清零，导航菜单文字瞬间左对齐 -
button设margin: 0; overflow: visible;，破坏某些 jQuery 插件依赖的默认溢出行为 -
img缺失max-width: 100%，导致.img-fluid失效、图片撑破容器 -
form内input、select被强制appearance: none，原生下拉箭头、日期图标全消失
为什么“删掉 reboot.css”反而更糟
单纯移除 bootstrap-reboot.min.css 会让后续 Bootstrap 组件样式失效，因为很多类（如 .btn、.container）内部依赖 box-sizing: border-box 和统一的 line-height。真正问题在于加载顺序和作用域失控：
- 如果你在自定义 CSS 里写了
* { margin: 0; padding: 0; }，它会提前破坏 reboot 对ul、button等元素的“有节制归一化”，导致 Bootstrap 的栅格、表单控件尺寸计算错乱 - reboot 中的
:where(:root) { box-sizing: border-box; }必须在所有其他 CSS 之前生效；若你把它放在custom.css后面，自定义里的box-sizing: content-box就会胜出，.col宽度立刻不准 - 某些构建工具（如 Laravel Mix）会把
bootstrap.bundle.js自动注入 reboot，即使你没显式引入 CSS，它也可能静默生效
如何让旧页面和 reboot 共存而不崩
核心是“隔离 + 补位”，不是对抗：
- 用包裹类限定 reboot 影响范围：
.legacy-page { all: revert; }恢复 UA 样式，再对其中特定元素（如.legacy-page h2）手动加回所需 margin - 对必须保留的旧结构，显式重置冲突属性：例如旧导航用
float: left，就在其父容器加.old-nav .col-* { float: none; flex: 0 0 auto; } - 补全 reboot 遗漏但旧页面依赖的关键规则：在自定义 CSS 开头加
img { max-width: 100%; height: auto; }，否则.img-fluid不起作用 - 检查
textarea是否被 reboot 禁用了resize—— 它没重置该属性，如需禁用得单独加resize: none
最容易被忽略的是：reboot 的效果不只看 class 名是否冲突，而取决于 computed styles 里哪条规则最终胜出。打开 DevTools 的 Computed 面板，直接点开被划掉的 margin-top 或 appearance，看来源是不是 bootstrap-reboot.min.css——这才是真实战场。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
