引入 CSS Reset 后布局塌陷是因过度清零默认样式所致，需手动补全基础排版或改用 Normalize.css；后者保留有用默认样式、仅修复浏览器差异，推荐多数项目使用。
引入 CSS Reset 后出现布局塌陷，通常是因为 Reset 过度清除了默认样式（比如把 margin、padding、line-height 全设为 0），而你的 HTML 结构又没补全基础排版规则。这不是 bug，是 Reset 的设计本意——它不负责“修复”，只负责“归零”。要解决，得配合手动重置或换用更理性的方案。
Reset 导致塌陷的典型原因
主流 Reset（如 Eric Meyer Reset）会执行类似以下操作：
- 所有元素
margin: 0; padding: 0; -
body和html去掉默认外边距，但没设font-size或line-height -
p、h1–h6、ul、ol等块级元素失去默认间距 -
img默认vertical-align: baseline被清除，可能引发行内布局错位
结果就是段落紧贴、标题挤在一起、列表项无缩进、按钮文字下沉——视觉上“塌”了。
两种实用解法：补还是换
方法一：在 Reset 后手动加基础排版样式（推荐初学者）
立即学习“前端免费学习笔记（深入）”；
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 给
body补font-family、line-height、color - 为
p、h1–h6单独设置合理margin-top/margin-bottom -
ul、ol加padding-left: 1.5em，li可加margin-bottom: 0.5em -
img加vertical-align: middle或display: block防止基线对齐塌陷
方法二：直接改用 Normalize.css（更省心）
- Normalize 不暴力清零，而是保留有用默认样式，仅修复浏览器差异（如表单控件、HTML5 元素渲染）
- 它让
h1保持大号字和上下间距，button保持可点击态，input统一高度 - 引入后基本不用额外写基础排版，适合大多数项目
normalize.css 正确用法
只需按顺序加载即可生效，无需额外配置：
- 放在自定义 CSS 文件之前（确保它的规则不被覆盖）
- 可通过 CDN 引入：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"> - 若用构建工具（如 Webpack），安装后
@import 'normalize.css';
注意：Normalize 本身不处理颜色、字体、栅格等设计层样式，它只做“底层对齐”，这部分仍由你掌控。
reset.css 还能用吗？怎么用才不翻车
可以，但更适合有明确设计系统、且愿意从零搭排版规范的项目：
- 别单独用 Reset，后面必须紧跟一套「base.css」来定义字体、行高、段落间距、链接样式等
- 把 Reset 当作“起点”，不是“终点”；把它看成一份“浏览器样式擦除说明书”
- 团队协作时，建议统一使用 Normalize + 自定义 base，降低理解成本
基本上就这些。选 Normalize 是为了少踩坑，选 Reset 是为了完全掌控——关键不在哪个高级，而在你是否愿意补上那层“人话样式”。
