在前端开发中，样式重置是一个很常见的问题。由于不同浏览器对 HTML 元素的默认样式不同，我们需要使用 CSS Reset 库来统一样式。这篇文章将介绍 8 个最好的 CSS Reset 库，帮助你更好地开发前端应用。
1. Normalize.css
Normalize.css 是一个非常流行的 CSS Reset 库。它的目标是让不同浏览器的默认样式保持一致性，并修复一些常见的浏览器 bug。Normalize.css 还提供了一些额外的样式，如基本的排版和表单样式。
示例代码：
// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<style>
/* Your custom styles here */
</style>
</head>
<body>
<!-- Your HTML here -->
</body>
</html>2. Reset.css
Reset.css 是一个非常简单的 CSS Reset 库，它只是将所有元素的 margin 和 padding 设置为 0，并将所有元素的 box-sizing 设置为 border-box。这样可以确保所有元素的尺寸和位置都是一致的。
示例代码：
// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
/* Your custom styles here */
</style>
</head>
<body>
<!-- Your HTML here -->
</body>
</html>3. Eric Meyer’s Reset CSS
Eric Meyer’s Reset CSS 是一个非常流行的 CSS Reset 库。它通过将大多数元素的 margin 和 padding 设置为 0，将所有元素的 box-sizing 设置为 content-box，并将一些常见的元素的样式重置为默认值来实现样式重置。
示例代码：
// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
/* Your custom styles here */
</style>
</head>
<body>
<!-- Your HTML here -->
</body>
</html>4. HTML5 Reset
HTML5 Reset 是一个专门为 HTML5 设计的 CSS Reset 库。它通过将大多数元素的 margin 和 padding 设置为 0，并将所有元素的 box-sizing 设置为 border-box 来实现样式重置。此外，它还提供了一些额外的样式，如基本的排版和表单样式。
示例代码：
// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/html5-reset/2.0.2/reset.min.css">
<style>
/* Your custom styles here */
</style>
</head>
<body>
<!-- Your HTML here -->
</body>
</html>5. Yahoo! (YUI 3) Reset CSS
Yahoo! (YUI 3) Reset CSS 是一个由 Yahoo 开发的 CSS Reset 库。它通过将大多数元素的 margin 和 padding 设置为 0，将所有元素的 box-sizing 设置为 border-box，并将一些常见的元素的样式重置为默认值来实现样式重置。
示例代码：
// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/yui/3.18.1/cssreset/cssreset-min.css">
<style>
/* Your custom styles here */
</style>
</head>
<body>
<!-- Your HTML here -->
</body>
</html>6. Universal Selector ‘*’ Reset
Universal Selector ‘*’ Reset 是一个非常简单的 CSS Reset 库，它仅使用通配符选择器将所有元素的 margin 和 padding 设置为 0，并将所有元素的 box-sizing 设置为 border-box。
示例代码：
// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Your custom styles here */
</style>
</head>
<body>
<!-- Your HTML here -->
</body>
</html>7. HTML5 Doctor CSS Reset
HTML5 Doctor CSS Reset 是一个非常简单的 CSS Reset 库，它仅使用通配符选择器将所有元素的 margin 和 padding 设置为 0，并将所有元素的 box-sizing 设置为 border-box。
示例代码：
// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/html5doctor-css-reset/1.6.1/reset.css">
<style>
/* Your custom styles here */
</style>
</head>
<body>
<!-- Your HTML here -->
</body>
</html>8. Modern CSS Reset
Modern CSS Reset 是一个专门为现代浏览器设计的 CSS Reset 库。它通过将大多数元素的 margin 和 padding 设置为 0，将所有元素的 box-sizing 设置为 border-box，并将一些常见的元素的样式重置为默认值来实现样式重置。
示例代码：
// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/modern-css-reset/1.2.0/modern-css-reset.min.css">
<style>
/* Your custom styles here */
</style>
</head>
<body>
<!-- Your HTML here -->
</body>
</html>结语
这篇文章介绍了 8 个最好的 CSS Reset 库，它们都有不同的重置策略和目标。你可以根据自己的需求选择其中一个来使用。在使用 CSS Reset 库时，你应该注意样式的继承和优先级，以确保你的样式表正常工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d1626ea941bf71342f35c1