分享 CSS Reset 的时光与风景-JavaScript中文网-JavaScript教程资源分享门户

作为前端开发者，我们需要为每个页面的 CSS 样式进行设定和定义，但是由于浏览器之间的差异和默认样式，会使得我们的样式不稳定，不一致，或者产生一些意想不到的问题。解决这个问题的方法之一就是使用 CSS Reset。

什么是 CSS Reset

CSS Reset 是一种 CSS 样式规范，目的是使得所有浏览器对特定的 HTML 元素拥有一致的默认值。这样，我们可以在页面中定义自己的样式并保证跨浏览器的一致性。CSS Reset 可以重置浏览器默认的 CSS 样式，但一定要小心操作，防止影响到其他组件和功能。

为什么要使用 CSS Reset

使用 CSS Reset 主要有以下几个原因：

统一样式：不同浏览器的默认样式不同，使用 CSS Reset 可以为所有浏览器设置统一的样式。
避免不必要的重写：避免无用的样式属性和被继承的样式属性。
提高开发效率：基于 CSS Reset，可以更快地开发并且免除大量的浏览器样式调试。

常用的 CSS Reset 方案

接下来，我们介绍一些常见的 CSS Reset 方案。

Eric Meyer Reset

Eric Meyer Reset 是最有名、最常用的 CSS Reset 的方案之一。它允许开发者定义一些常用的 HTML 标签样式，使其兼容所有浏览器，从而为我们的页面构建一个清晰和一致的基础样式。

// javascriptcn.com 代码示例
/**
 * `Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * License: none (public domain)
 */
 
/* 大多数元素都需要清除来自浏览器的默认外部和内部边距 */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

/* 改变 `box-sizing` to apply `border-box` box model to every element. */
html {
    box-sizing: border-box;
}

/* 强烈建议在html上应用了这个 normalize 之后定义 fontSize 在直接定义 body 的字体大小 */
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

/* 添加 block display to arbitrary elements */
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section,
summary {
    display: block;
}

如上代码清除了主要的内外边距，并对 HTML5 语义标签进行了基本的 CSS 样式声明。

Normalize.css

Normalize.css 是另一个 CSS Reset 方案，它不像 Eric Meyer Reset 那样简单地删除默认值，而是通过重写所有浏览器的默认值并将它们标准化为相符的结果，从而创建出一种更加一致和可预测的样式。Normalize.css 还包括了对 HTML5 元素的所有全局重置。

// javascriptcn.com 代码示例
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
* 规定文档根元素的样式，并保留浏览器的默认样式。重置字体尺寸、行高、间距和背景的颜色。
*/
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* 元素类别
   ========================================================================== */
/**
* 移除空margin和padding
*/
body {
  margin: 0;
  padding: 0;
}

/**
* 用来定于句子的首字母的颜色和风格
*/
article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
  display: block;
}

/**
* 对blockquote、q实现引用号的细节也进行默认规定
*/
blockquote,
q {
  quotes: "" "";
}

/**
* 清楚OL和UL的margin和padding(IE8下OL有8px的内边距，UL有剩余的外边距)
*/
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

Normalize.css 没有删除所有浏览器的默认值，而是提供了一种更加合理而清晰的标准方式。它关注的是现代浏览器之间的差异，而不是旧版浏览器的差异。切记避免重写样式。

其他方案

除了 Eric Meyer Reset 和 Normalize.css，还有许多其他的 CSS Reset 方案可以使用。基本思路都是大同小异，都是为了解决跨浏览器样式一致性。如果你感兴趣，可以自行 Google 了解其他方案。

注意事项

记得依据设计稿的具体要求判断是否使用 CSS Reset
与页面设计保持一致：大多数重置样式都是优化默认的浏览器样式，所以请确保你的样式能够达到自己想要的效果。
需注意向后兼容：在决定使用 CSS Reset 时，请确保它与旧的浏览器兼容，避免出现样式错乱或页面展示不正常的问题。

总结

CSS Reset 是解决跨浏览器样式一致性问题的重要方式之一， Eric Meyer's Reset 和 Normalize.css 是最常用的两种方案。选择哪种方案主要依据个人和团队的实际需要，使用时需注意保证向后兼容，保证与页面设计保持一致。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652a2c9e7d4982a6ebc85389