在进行前端开发时，我们经常会遇到浏览器默认样式的问题，比如一些元素的边距、字体大小等属性不符合我们的设计需求。这时候，我们通常会使用 CSS Reset 来抹平浏览器默认样式，以便更方便地进行页面样式的设计和布局。
什么是 CSS Reset？
CSS Reset 是一种用于重置浏览器默认样式的技术，它通过在样式表中设置针对不同浏览器的通用样式，来消除不同浏览器之间的样式差异。简而言之，CSS Reset 就是用来规约浏览器默认样式的一种技术。
CSS Reset 的实现方式
1.传统的 CSS Reset
传统的 CSS Reset 通常会包含一个重置样式表（reset.css 或 normalize.css），这个样式表会为 HTML 元素的各种属性设置一些默认值，以便我们能够更方便地进行样式布局和设计。
比如以下是一个基本的重置样式表：
-- -------------------- ---- ------- -- ----- -- ----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- -- - ------- -- -------- -- ------- -- -------- -- ---------- ----- --------------- --------- ----------- ------------ -
这个样式表中使用了通配符选择器（*），它会将所有 HTML 元素的内边距、外边距、边框和字体大小设置为 0，以去掉浏览器默认样式的影响。不过这种传统的 CSS Reset 存在一个问题，就是它会去掉一些有用的默认属性，比如 list-style。
2.新时代的 CSS Reset
近些年来，随着各种浏览器默认样式的趋同化，CSS Reset 不再像以往那样必不可少。取而代之的是，我们使用更加精细和细致的样式规则来重置浏览器默认样式，来达到更加准确和灵活的样式控制效果。
比如下面这个最小化的 Reset 样式，只包含了对一些常见属性的规定。
-- -------------------- ---- ------- -- ----- -- ---- - ---------- ------ - ---- - ------- -- -------- -- ---------- ------- ------------ ---- ------------ ----------- - --- --- --- --- --- -- - ------------ ------- ------- -- ------------ -- - - - ------ -------- ---------------- ----- -
这个样式表中，我们没有使用通配符选择器（*），而是只针对具体的 HTML 元素设置样式。这样做的好处在于，我们可以保存一些有用的默认属性，比如 list-style，而不会破坏页面的布局。
总结
CSS Reset 是前端开发中非常常用的技术，它可以帮助我们统一浏览器的默认样式，从而更方便地进行页面样式的设计和布局，但需要注意的是，在新时代的 CSS Reset 中，我们要更加精细和细致地进行样式规约，以达到更加准确和灵活的样式控制效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64573f63968c7c53b0a07984