在前端开发中，我们通常会使用 *{} 来为网页中的所有元素添加一些默认样式，如边距、字体等。这样做可以让网页看起来更加整洁，但也会出现一些问题。比如，不同浏览器对默认样式的处理不同，导致网页在不同浏览器中呈现不一致；有些默认样式可能会覆盖我们自己设置的样式，导致我们的样式无法生效。
为了解决这些问题，一些开发者会采用 CSS Reset 技术。
什么是 CSS Reset？
CSS Reset 是一种技术，通过重置浏览器对元素的默认样式，来解决 *{} 全局样式问题。CSS Reset 可以覆盖浏览器默认样式，让我们的样式生效；也可以减少不同浏览器对默认样式的差异，让网页在不同浏览器中呈现一致。
CSS Reset 的实现方式
实现 CSS Reset 有两种方式：手动编写和使用现成的库。
手动编写 CSS Reset
手动编写 CSS Reset 有一定的难度，需要遵照一定的规则。通常的做法是将所有元素的默认样式重置成一样的，再根据需要手动添加样式。以下是一份简单的 CSS Reset 样式：
// javascriptcn.com 代码示例
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 16px;
font-family: Arial, sans-serif;
}
html {
height: 100%;
}
body {
height: 100%;
}这段代码将所有元素的边距和内边距重置成 0，盒模型改为 border-box，字体大小和字体族设置为一样的，为了让网页占满整个浏览器，还特意给 html 和 body 元素设置了高度为 100%。
使用现成的库
与手动编写不同，使用现成的库可以让我们省去很多时间和精力，同时也更加合理和标准化。以下是几款常用的 CSS Reset 库：
- normalize.css
- reset.css
- sanitize.css
CSS Reset 的使用场景
虽然 CSS Reset 可以有效解决 *{} 全局样式问题，但并不是所有场景都需要使用。CSS Reset 适用于以下场景：
- 你想让你的网页在不同浏览器中呈现一致的样式。
- 你的网页需要自定义大量元素的样式，但默认样式会干扰你的工作。
- 你在使用某些 CSS 框架时，需要覆盖其中的默认样式。
如果你只是开发一个简单的网站，或者使用了一些 CSS 框架，那么默认样式可能并不会干扰你的样式设置。
总结
CSS Reset 是一种有用的技术，可以解决 *{} 全局样式问题，从而让网页在不同浏览器中呈现一致的样式。我们可以手动编写 CSS Reset 样式，也可以使用现成的库来快速实现。
同时，我们也需要注意 CSS Reset 的使用场景，以免在不必要的情况下使用，增加代码量和工作量。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65486ef37d4982a6eb2b32bd