CSS Reset 是前端开发中经常使用的技术。它们的作用是为不同的浏览器提供统一的 CSS 样式，这样可以确保你的站点在不同的浏览器上呈现一致的效果。本文将向你展示如何自己实现 CSS Reset。
什么是 CSS Reset？
CSS Reset 是一种 CSS 技术，用于重置浏览器内置样式，从而实现更加一致和可预测的样式。
由于不同浏览器厂商实现 CSS 样式的方式不同，因此浏览器提供的默认样式往往存在差异。而 CSS Reset 正是通过将默认浏览器样式归零，实现了各浏览器表现一致的效果。
如何实现 CSS Reset？
1. 选择器重置
通过选择器重置，将默认样式设置为 none 或者 auto，包括 margin、padding、list-style 等属性。在选择器重置时，我们需要需要注意一些元素，比如 ul 和 ol 标签等存在默认的样式表现。
示例代码：
-- -------------------- ---- ------- ------- --------------------------------------------- - ------- -- -------- -- ------- -- -------- -- ---------- ----- - --------------- ----- - ----------- ----- - --- - -------- ------ ------ ----- ------- ----- -
2. 盒模型重置
盒模型重置是在选择器重置基础之上，将元素的盒模型设置为 border-box。使用 border-box 可以方便的计算元素的尺寸，避免由于 content、padding 和 border 大小的不同而造成的元素布局缺陷。
示例代码：
/*盒模型重置*/
* {
box-sizing: border-box;
}3. 全局重置
全局重置指对整个页面的元素方案进行归零，去除所有元素的默认样式。全局重置包括了选择器重置、盒模型重置和更多的元素等。
示例代码：
-- -------------------- ---- -------
--------
----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ------ ----- -------- -------- ---- ----- ----- ---- ---- --- ---- ---- ---- -- -- ----------- ------- ------- ---- ---- --- -------- -- ---------- --- --- --- --- ----------------- ------ ------------- -------- ------ ------ --------- --- --- -------- ------ ------- -------- ------------- ----------- ------- ------- ------- ----- ---- ------- ----- -------- ------------- ----- ------ ----- -
------- --
-------- --
------- --
---------- -----
----- --------
--------------- ---------
-
-- ----- ------------ ----- --- ----- -------- --
-------- ------ -------- ----------- ------- ------- ------- ------- ----- ---- ------- -
-------- ------
-
-- ----- ---------------- --- --- ----- -------- --
--------- -
-------- -----
-总结
通过实现 CSS Reset 可以消除浏览器的默认样式，统一不同浏览器的表现效果，保证你的站点在不同设备和平台上即使都可以以最佳状态呈现出来。三种方法中全局重置方式覆盖更多元素，效果更好，推荐使用全局重置。
在开始实现 CSS Reset 之前应该要明确自己的目标，知道要达到的效果是什么样子的。此外，还应该要定期更新 CSS Reset，以确保其与浏览器的环境同步，从而提高代码效率和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648e80d648841e9894cdd790