### 常用标准CSS重置样式表推荐
在现代Web开发中，为了确保跨浏览器的一致性和更好的控制页面布局，通常会使用一种标准化的CSS重置方法来消除不同浏览器之间的默认样式差异。以下是几种常见的CSS重置方案及其特点：
#### 1. **Eric Meyer 的 Reset**
这是最早也是最著名的CSS重置之一，由 Eric Meyer 提出。它通过覆盖几乎所有HTML标签的默认样式，使开发者能够从零开始设计自己的样式。
```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 display-role reset for older browsers */
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;
}
```
此代码片段提供了全面的重置策略，适用于大多数场景[^1]。
---
#### 2. **Normalize.css**
与传统的Reset相比，`normalize.css` 并不是简单地移除所有默认样式，而是保留了一些有用的浏览器默认行为并进行了优化。这种方法可以更好地保持用户体验一致性，同时减少不必要的样式的清除工作。
主要特性包括但不限于：
- 统一各浏览器中的字体大小设置；
- 改善表格边框处理方式；
- 调整列表项间距使其更合理；
具体实现可参考官方文档或直接引入文件链接：<https://necolas.github.io/normalize.css/>[^2]
---
#### 3. **Modern CSS Reset (基于最新趋势)**
随着技术的发展以及新特性的加入，一些现代化框架也提出了更加简洁高效的解决方案。例如下面这段简化版的reset规则就涵盖了大部分日常需求:
```css
*,
*:before,
*:after {
box-sizing: border-box; /* 让宽高计算包含padding/border部分 */
}
html {
font-family: sans-serif; /* 设置全局无衬线字体族 */
line-height: 1.15; /* 定义基础行高等比例关系 */
}
body {
margin: 0; /* 清楚body外边距 */
}
main {
display: block; /* 明确指定main元素显示模式为block级*/
}
h1,h2,h3,h4,h5,h6,p{
margin-block-start : 0px ;
margin-block-end : 0px ;
} /* 移除非必要段落头部尾部空白 */
ul , ol {list-style-type:none;} /* 取消列表标记*/
button,input[type="submit"],input[type="reset"]{-webkit-appearance:button;}
input::-moz-placeholder{text-transform:none;}
textarea{resize:both;}
img{max-width:100%;height:auto;}
video,audio{display:inline-block;}
iframe{border:0;}
```
上述代码体现了当前流行的实用主义原则，在保证功能完整的前提下尽可能精简冗余定义.
---
### 总结
对于初学者或者小型项目来说，采用 `Normalize.css` 是较为稳妥的选择因为它既兼顾了兼容性又不会过度抹杀原生体验。而对于追求极致性能的大规模应用，则可以根据实际需要定制专属版本甚至完全抛弃传统意义上的“重置”，转而依赖于预设好的组件库如Bootstrap、TailwindCSS等内部机制完成初始化配置操作。
本文介绍了两种常用的HTML样式重置方案：rest.css和normalize.css。rest.css追求浏览器间的一致性，而normalize.css则强调通用性和可维护性。选择哪种方案取决于具体项目的需要。
扫一扫
1908
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
