什么是 CSS Reset？
CSS Reset 是一种技术，用于重置浏览器默认样式表中的一些样式规则。HTML 元素在不同浏览器或不同版本的同一浏览器中可能具有不同的默认样式规则。这些不同的样式规则可能会导致 Web 页面在不同浏览器中呈现出不同的外观或表现。CSS Reset 的目标是为了消除这些不同之处，使得不同浏览器中 Web 页面的表现能够一致。
为什么需要 CSS Reset？
在 Web 开发中，由于浏览器默认样式的存在，很难做到不同浏览器间的视觉效果一致。有些默认样式甚至会影响到 Web 页面的布局和排版。例如，某些浏览器对于图片元素的默认垂直对齐方式是基线，而某些浏览器的默认垂直对齐方式则是中线，这会导致在某些情况下，图片和其他元素的垂直对齐产生问题。
如果不进行 CSS Reset，那么样式的互相影响会导致我们难以准确地掌控 Web 页面的外观。因此，进行 CSS Reset 是很有必要的，它可以帮助我们消除浏览器默认样式的影响，从而更方便地进行页面样式的控制。
如何实现 CSS Reset？
CSS Reset 是一种非常低级别的技术，通常通过 CSS 代码来实现。下面是一份简单的 CSS Reset 的示例代码：
-- -------------------- ---- ------- -- ----- ---------- -- ---------- -- -- ---------- -------- - ----------- ----------- - -- ----- ------ --- ------- -- --- ---- -------- -- ----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- -- - ------- -- -------- -- - -- ----- --------- --- ----------- -- --- ---- -------- -- ----- ---- - ---------- ----- ------------ ------ ----------- -
上述代码中包含了三个部分：
- reset box-sizing: 将 box-sizing 属性设置为了 border-box。
- reset margin and padding: 将 margin 和 padding 属性设置为了 0。除此之外，它还列出了 HTML 中的所有元素，这样可以确保它们都按照这样的方式进行了重置。
- reset font-size and font-family: 将 HTML 和 body 的 font-size 设置为 16px，将 font-family 设置为 Arial, sans-serif。
CSS Reset 的注意事项
在实现 CSS Reset 的过程中，需要注意以下几点：
- CSS Reset 是一种非常低级别的技术，因此实现时需要考虑清楚避免对现有样式产生太大的影响，以免造成不必要的麻烦。
- 需要根据需要适度细化 Reset 的内容。不要因为想要避免影响而将一些无关紧要的样式也进行了 Reset，这样会使代码变得冗长，并且浪费一些性能
- CSS Reset 可能会影响一些现有 CSS 样式的表现，例如 button 样式或 input 样式。在使用 CSS Reset 的同时，需要考虑其会带来的影响，并进行相应的调整以适应实际需求。
总结
CSS Reset 是一种非常有用的技术，它可以消除浏览器默认样式的影响，使不同浏览器展现出的效果更加一致。在实现 CSS Reset 的过程中，需要注意不要将 Reset 太过细化，以免出现不必要的麻烦。通过合理的使用 CSS Reset 技术，我们可以更好地掌控 Web 页面的排版，从而实现更好的用户体验。
参考资料
示例代码
下面是使用 CSS Reset 实现的一个简单的页面示例：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------- ----- ----------
-------
-- --- ----- -- --
- -
------- --
-------- --
----------- -----------
-
----- ---- -
---------- -----
------------ ------ -----------
-
-- ---- --
------ -
-------- -----
---------------- --------------
------------ -------
------- -----
----------------- -----
------ -----
------------- -----
-------------- -----
-
--- -
-------- -----
----------- -----
-
--- -- -
------------- -----
-
--- ------------- -
------------- --
-
- -
---------------- -----
------ -----
-
---- -
-------- -----
-
-- -
---------- ----
-------------- -----
-
- -
------------ ----
-------------- -----
-
--- -
---------- -----
------- -----
-
--------
-------
------
--------
------- ----- -------
-----
------ ----------------------
------ -----------------------
------ -------------------------
------
---------
------
---------- -----------
-------- ----- ----- --- ----- ----------- ---------- ----- ------ ---------- ----- --- -------- ------- ------ ---- -------- ---- --- --------- ------ ---- --- ------ ------- --------- ----------- ---- -- ------- -------- --- ---- --------- ----- ------ ------- ----- ---- --------- -------------
---- --------------------------------------
-------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6462f9b6968c7c53b04047fa