在前端开发中，样式是非常重要的一部分。但是由于不同浏览器的默认样式不同，页面在不同浏览器上展示时会存在差异，这会影响用户体验，并且给开发带来额外的困扰。因此，为了让网页在不同浏览器上展示一致，我们需要进行 CSS Reset。
什么是 CSS Reset?
CSS Reset是一个通用的 CSS 样式集合，它能够取消不同浏览器的默认样式，并将元素的样式设为空，从而实现基于统一标准的网页布局。CSS Reset并非为网页添加新的样式，而是将默认样式取消，让我们重新定制样式。
为什么需要进行 CSS Reset？
在不同浏览器上展示样式存在差异是很普遍的情况，这给用户的浏览、使用、购买等等方面都带来了额外的成本，而这些成本是可以避免的。针对这个问题，我们可以选择使用CSS Reset，其中包含的CSS样式可以覆盖不同浏览器的默认样式，确保页面在各种浏览器和设备下展示一致，能够让用户感受更加流畅和自然。
常用的 CSS Reset 技巧
下面介绍一些常见的 CSS Reset 技巧，它们可以帮助我们在实现 CSS Reset 的过程中更高效的达到目标。
1. 去除默认的 margin 和 padding
为了保证页面的一致性，我们可以在CSS中将所有的 margin 和 padding 值设为 0，并为所有的 HTML 元素添加一个 border-box 盒子模型，这样做可以保证元素的宽度和高度不受 margin 和 padding 的影响。
*{ margin: 0; padding: 0; box-sizing: border-box; }
2. 去除列表项样式
在不同浏览器上，列表项 <li> 的默认样式可能会不同，为了保证页面的一致性，我们需要去除列表项的默认样式。
ul, ol{ list-style: none; }
3. 去除默认的链接样式
在不同浏览器上，链接 <a> 的默认样式也存在差异，在实现 CSS Reset 的时候，我们需要去除链接的默认字体、颜色和下划线。
a{ color: inherit; text-decoration: none; }
4. 去除图片默认样式
不同浏览器对于图片元素的默认样式也有所不同，在CSS Reset中，我们需要去掉图片的默认边框和打印时的问题。
img{ border: none; max-width: 100%; }
如何实现 CSS Reset？
实现 CSS Reset 的方式有很多种，其中最常用的两种方式是使用开源的 CSS Reset 样式库或者自己编写 CSS Reset 样式。
1. 使用开源的 CSS Reset 样式库
目前比较流行的 CSS Reset 样式库有 Normalize.css 和 Reset CSS， 它们都能够解决浏览器差异问题，使页面元素在各浏览器中表现一致。我们可以直接引入这些样式库，使用它们所提供的样式来达到 CSS Reset 的目的。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://meyerweb.com/eric/tools/css/reset/reset.css">
2. 自己编写 CSS Reset
自己编写 CSS Reset 是有一定难度的，需要充分理解样式的继承与层叠规则，同时需要充分了解不同浏览器的默认样式。下面是一个简单的 CSS Reset 示例。
-- -------------------- ---- ------- ----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- -- - ------- -- -------- -- ------- -- ---------- ----- ----- -------- --------------- --------- -展开代码
总结
CSS Reset 是一项非常重要的技术，在前端开发中经常被使用。通过仔细研究不同浏览器的默认样式，我们能够编写出有效的 CSS Reset 样式，使得页面在各个浏览器下展示一致，并能够提高用户的体验。希望这篇文章能够帮助读者更好的掌握 CSS Reset 的技巧。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/652e0a9f7d4982a6ebf1e43d
