浏览器为了保证没有样式表的页面也能正常显示，会给html元素预设一些默认的样式，比如body元素默认有8px的外边距，h1到h6标题有默认的字号和加粗样式，ul、ol列表默认有左内边距和项目符号等。这些默认样式在不同浏览器中的表现可能存在细微差异，会导致页面开发时出现布局错乱、样式不一致的问题，因此实际开发中通常需要先清除这些默认样式。
常用的清除浏览器默认样式方法
1. 自定义重置样式表
开发者可以根据项目需求，手动编写一段css代码，覆盖掉常用的浏览器默认样式，这种方式灵活性最高，适合中小型项目。下面是一段常用的基础重置样式代码：
/* 清除所有元素的内外边距 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 清除列表默认样式 */
ul, ol {
list-style: none;
}
/* 清除a标签默认下划线和颜色 */
a {
text-decoration: none;
color: inherit;
}
/* 清除标题默认加粗和字号 */
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
font-size: 1em;
}
/* 清除表格边框合并 */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* 清除输入框和按钮默认样式 */
input, button, textarea, select {
outline: none;
border: none;
background: none;
font-family: inherit;
}
2. 使用Reset CSS方案
Reset CSS是一套成熟的重置样式方案，它会将所有元素的默认样式都重置为统一的基准值，完全消除浏览器之间的差异。最经典的是Eric Meyer提出的Reset CSS，核心思路是把所有元素的margin、padding、边框等属性都设置为0，完全清除默认样式。下面是简化后的Reset CSS代码示例：
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 元素重置为块级元素 */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
3. 使用Normalize CSS方案
Normalize CSS和Reset CSS的思路不同，它不会完全清除所有默认样式，而是保留有用的默认样式，同时修复不同浏览器之间的样式差异，让所有浏览器对元素的渲染更加一致。它更适合需要保留部分浏览器默认样式的项目，比如希望标题仍然有明显的层级区分，链接保留默认的交互样式等。下面是Normalize CSS的核心代码示例：
/* 修复html5元素在旧浏览器中的显示问题 */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
/* 统一body的默认样式 */
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
}
/* 统一标题样式 */
h1 { font-size: 2em; margin: 0.67em 0; }
h2 { font-size: 1.5em; margin: 0.83em 0; }
h3 { font-size: 1.17em; margin: 1em 0; }
h4 { font-size: 1em; margin: 1.33em 0; }
h5 { font-size: 0.83em; margin: 1.67em 0; }
h6 { font-size: 0.67em; margin: 2.33em 0; }
/* 统一列表样式 */
ul, ol {
margin: 0;
padding-left: 40px;
}
/* 统一链接样式 */
a {
color: #007bff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
不同方案的适用场景对比
可以根据项目需求选择合适的清除默认样式方案，下面是三种方案的对比：
| 方案类型 | 特点 | 适用场景 |
|---|---|---|
| 自定义重置样式 | 灵活性高，只清除需要的样式，代码量小 | 中小型项目，样式需求明确的项目 |
| Reset CSS | 完全清除所有默认样式，消除所有浏览器差异 | 需要完全自定义所有样式的项目，大型定制项目 |
| Normalize CSS | 保留有用的默认样式，修复浏览器差异，代码更友好 | 需要保留部分默认样式的项目，快速开发项目 |
注意事项
- 清除默认样式的代码需要放在所有自定义样式的最前面，避免被后续样式覆盖
- 如果使用第三方UI框架，比如Element UI、Ant Design等，这些框架通常已经内置了默认样式重置，不需要再重复引入重置样式表
- 自定义重置样式时，不要过度清除样式，比如如果项目需要保留表单元素的默认交互样式，就不要清除input、button的默认边框和背景
- 使用
box-sizing: border-box可以统一盒模型的计算方式，建议放在重置样式中一起设置，避免后续布局计算出现问题
css清除默认样式reset_cssnormalize_css修改时间：2026-07-07 01:33:31