随着前端技术的不断发展，CSS 已经成为了现代化网站设计中不可或缺的一部分。为了让样式在不同浏览器下统一，CSS Reset 的概念应运而生。但在实际开发中，我们又发现了一些问题，比如 Reset 对于某些框架的兼容性问题，而 CSS 框架也可以帮助我们解决这些问题。那么 CSS Reset 与 CSS 框架到底有什么关系？本篇文章将会详细探讨这个问题。
CSS Reset 是什么？
CSS Reset 是用于消除不同浏览器默认样式差异的一种技术方案。由于不同浏览器默认样式存在一定差异，因此为了确保开发者所写的 CSS 样式在不同浏览器下表现一致，有必要先消除浏览器默认样式的影响。这便是 CSS Reset 的作用。
比如我们在 Chrome 和 Firefox 浏览器下打出以下的 HTML（假设 index.css 是空的）：
// javascriptcn.com 代码示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS Reset 示例</title> <link rel="stylesheet" href="index.css"> </head> <body> <button>Click Me</button> </body> </html>
我们会发现，在两个浏览器下，<button> 标签都会存在以下默认样式：
button {
background-color: buttonface;
border: 2px outset buttonface;
color: buttontext;
display: inline-block;
margin: 0.5em 0;
padding: 2px 6px;
}在这种情况下，如果想要确保 <button> 在两个浏览器下都采用相同的样式，我们就需要采用 CSS Reset 技术方案，从而消除掉默认样式的影响，再自行定义相关样式：
// javascriptcn.com 代码示例
/* Reset */
button, input {
margin: 0;
padding: 0;
border: 0;
background-color: transparent;
font-size: 100%;
}
/* 定义我们想要的样式 */
button {
background-color: blue;
color: white;
padding: 1rem 2rem;
}如此，我们就可以得到一个一致的按钮样式。
CSS 框架是什么？
CSS 框架是一套在静态网页设计中常用的通用代码库。CSS 框架在设计时考虑到大多数常用元素，并提供相应的样式和功能。使用 CSS 框架有助于加快开发速度和提高网站的一致性和可访问性。
常见的 CSS 框架有 Bootstrap、Foundation、Semantic UI 等。
在一些 CSS 框架中，已经含有了 Reset 的样式，比如 Bootstrap，它的基础样式中就已经包含了 Reset 的代码，可以实现消除不同浏览器默认样式的效果。所以，在使用这些框架时就不需要再手动写 CSS Reset 代码了。
但在一些其他的 CSS 框架中，比如 Bulma，其基础样式中并没有包含 Reset 的代码。这时，我们就需要手动添加 CSS Reset 的样式，才能确保样式在不同浏览器中的一致性。
此外，即使在已经含有 Reset 代码的 CSS 框架中，我们依然可以添加自己的 Reset 样式，来覆盖框架中已有的样式。
那么，如果我们使用了 CSS 框架，是否意味着我们不再需要写各种样式了呢？实际上，这并不是完全正确的。有时候，我们在使用 CSS 框架时还会遇到一些样式问题，这时就需要自行编写样式或者使用其他工具完成样式修改。比如，在使用 Bootstrap 时，如果想要调整导航栏的样式，需要使用 Bootstrap 自带的导航栏修改工具或者手动编写 CSS 代码来实现。
如何使用 CSS Reset
当我们需要手动编写 CSS Reset 的时候，有两种常见的方式：
1. 使用已有的 CSS Reset 库
目前已有很多好用的 CSS Reset 库可以直接使用，比如 Normalize.css 和 Reset CSS。这些库已经考虑到了不同浏览器的差异，并提供了较为完善的 Reset 方案，可以节省开发者的时间和精力。
使用 Normalize.css 可以通过以下步骤实现：
- 在 HTML 页面中添加 Normalize.css 的链接：
<head> <link rel="stylesheet" type="text/css" href="normalize.css"> </head>
- 在 CSS 文件中使用 Reset 样式：
// javascriptcn.com 代码示例
/* 将通用样式的 margin 和 padding 设为 0 */
* {
margin: 0;
padding: 0;
}
/* 将链接样式去掉下划线 */
a {
text-decoration: none;
color: inherit;
}2. 自己编写 CSS Reset 样式
如果需要自己编写 Reset 样式，可以考虑以下几个方面：
- 通用性：CSS Reset 应该能够兼容所有主流的浏览器，不得对某一种浏览器的样式造成影响。
- 简洁性：CSS Reset 应该尽可能少地使用选择器和样式，免得在后面的样式中被频繁覆盖。
- 兼容性：CSS Reset 应该与后面的 CSS 样式相互兼容，免得影响页面的整体布局。
// javascriptcn.com 代码示例
/* Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, quote, 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;
}
/* 将链接去掉下划线 */
a {
text-decoration: none;
color: inherit;
}
/* 强制所有元素使用盒模型 */
*, ::before, ::after {
box-sizing: border-box;
}
/* 针对 IE 的一些样式修复 */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
ul, li {
list-style: none;
}总结
本篇文章主要介绍了 CSS Reset 的概念和作用，以及 CSS 框架与 CSS Reset 的关系。同时，也详细探讨了如何使用已有的 CSS Reset 库或者自己编写 Reset 样式。
在实际开发中，合理地使用 CSS Reset 和 CSS 框架，可以提高开发效率和代码可维护性，同时也可以达到一定的代码复用和风格统一的效果。但同时也要注意样式问题和兼容性问题，避免在开发中遇到困难。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653dffab7d4982a6eb7981d1