如果你在开发前端页面或者应用，你一定会使用 CSS Reset 来让你的应用在不同浏览器下得到一致的表现效果。但是，不同的 CSS Reset 代码库针对不同的使用场景，而且就算是同一份代码库，也会有不同的实现思路。因此，在真正使用 CSS Reset 之前，你需要了解不同代码库的实现思路，有必要编写自己的 CSS Reset 代码库来满足自己的需求。
CSS Reset 是什么
在开始了解 CSS Reset 的实现思路之前，我们先来看看 CSS Reset 是什么。一般情况下，我们使用 CSS 重置样式的目的是为了清除可能存在的浏览器默认样式，以实现在不同浏览器下一致的表现效果。但是，不同浏览器的默认样式是不同的，所以使用 CSS Reset 的效果可能对于某些浏览器并不能完全达到一致效果的要求，所以我们需要仔细选择适合我们使用场景的 CSS Reset 代码库。
比如，一些严格的网站可能需要更严格的 CSS Reset，以确保在所有浏览器下都能够清除默认样式。而一些时尚的网站可能需要更自由的 CSS Reset，以充分发挥 CSS 在浏览器中的灵活性。
CSS Reset 的实现思路
CSS Reset 的实现思路主要分为两个方向，一个是通过通用选择器来对整个页面元素进行样式重置，一个是通过重置部分元素的样式来实现自己的 Reset。
通用选择器重置
通用选择器重置是最常见的 CSS Reset 实现思路，这种方式会通过设置通用选择器的样式，来对整个页面的元素样式进行重置。以下是一个基本的通用选择器 Reset：
-- -------------------- ---- ------- - - ------- -- -------- -- ------- -- ----------- ----------- ---------- -------- ------------ -------- --------------- --------- -
在这个 Reset 中，通用选择器将会把所有元素的 margin、padding、border 等样式都清空，同时，设置了 box-sizing: border-box，使得元素的宽度和高度在计算时不再考虑 border 和 padding。还有一些其他的属性也进行了重置，比如字体属性 font-size 和 font-family，垂直对齐属性 vertical-align 等。
在实际开发中，我们可能还需要加入一些针对性的样式重置。比如，清除表单元素的默认样式、调整图片的垂直对齐方式等。
-- -------------------- ---- ------- ------ ------- ------- -------- - ------- -- ----- -------- ------ -------- - --- - -------- ------ ------ ----- ------- ----- --------------- ------- -
针对性元素样式重置
除了通用选择器 Reset 之外，还可以通过针对性元素样式重置的方式来实现自己的 Reset。这种方式通常需要借助浏览器提供的某些重置类样式、清除浮动等技巧来实现。以下是一个基本的针对性元素样式 Reset：
-- -------------------- ---- ------- ----- ---- - ------- -- -------- -- - --- -- - ----------- ----- - - - ---------------- ----- - -- ---- -- ---------------- - -------- --- -------- ------ ------ ----- -
在这个 Reset 中，我们对整个页面元素的样式进行了重置，同时对于一些特定元素如 ul、ol 也进行了相关的样式重置。并且，我们还使用了 clearfix 类样式来清除浮动，以便更好的处理浮动元素的尺寸和位置。
你可以根据自己的需求来编写自己的针对性元素样式 Reset，只要确保在不同浏览器中都可以达到相同的效果即可。
总结
CSS Reset 是前端开发中必不可少的一部分，它可以让页面在不同浏览器下达到一致的表现效果。虽然市面上已经有很多 CSS Reset 代码库，但是根据不同的使用场景，我们需要仔细选择适合自己的 Reset 代码库，或者编写适合自己的 Reset 代码库。本文介绍了通过通用选择器和针对性元素样式重置两种方式实现自己的 Reset 的实现思路，你可以根据自己的需求来选择合适的方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647eb69048841e9894e6823f