根本原因是浏览器默认样式与自定义CSS隐式冲突；需针对性重置box-sizing、margin/padding、font-size等核心属性，配合基础样式重建布局锚点，并确保重置CSS最先加载。
为什么引入 CSS 后布局突然错乱
根本原因不是样式“没生效”，而是浏览器默认样式（user agent stylesheet）和你引入的 CSS 之间发生了隐式冲突。比如 margin、padding、box-sizing、font-size 在不同标签上差异极大，h1 默认有上下边距，ul 默认有左边距和内边距，input 和 button 默认尺寸不一致——这些在未重置时会叠加到你的规则上，导致视觉偏移或尺寸失控。
重置样式必须覆盖的关键项
不要用全量 * { margin: 0; padding: 0; }，它破坏表单控件可访问性和语义表现。应聚焦影响布局的核心属性：
-
box-sizing统一设为border-box（含伪元素） -
margin和padding对body、h1–h6、p、ul、ol、dl、pre、form、fieldset等显式归零 -
font-size和line-height在html或body设基准值（如16px/1.5），避免继承混乱 -
list-style对ul、ol显式设为none或保留，但不能依赖默认
基础样式要补哪些“默认行为”
重置只是清场，基础样式才是重建布局锚点。漏掉这些，重置后反而更难写样式：
- 给
a补text-decoration: none和基础颜色（否则全是下划线+蓝色，干扰设计） - 给
img加max-width: 100%和height: auto，防溢出容器 - 给
table设border-collapse: collapse，避免双线边框 - 给
button、input、select、textarea统一font-family、font-size、line-height和vertical-align: middle - 对
code、pre指定等宽字体和基础背景/边框（否则纯文本无区分度）
引入顺序和作用域控制很关键
重置样式必须是整个样式链的第一环，否则后续规则可能已被默认样式污染。常见错误包括：
立即学习“前端免费学习笔记（深入）”；
- 把重置 CSS 放在第三方 UI 库（如 Bootstrap）之后加载 → 库自带重置被覆盖，又带回默认样式
- 用
@import引入重置，却放在主样式文件中间 → 加载时机不可控，可能造成 FOUC 或局部重绘 - 在 scoped style（如 Vue 单文件组件）里只重置局部，而全局组件仍走浏览器默认 → 布局割裂
推荐做法：将重置 + 基础样式合并为一个 base.css，在所有其他样式前通过 <link> 同步加载；若用构建工具，确保它在打包入口的最顶部 @import。
真正容易被忽略的是表单控件的 appearance 和 outline：它们不参与重置，但影响点击反馈和焦点状态，需在基础样式里单独处理。
