在前端开发中，我们常常使用 CSS Reset 或 CSS Normalize 来消除浏览器默认样式，保证页面元素在不同浏览器中呈现一致的效果。但是，对于这两种方案的差异，我们是否真的理解得很清楚呢？
CSS Reset 与 CSS Normalize 的区别
CSS Reset
CSS Reset 的思想是将所有元素的样式重置为相同的基础样式，以消除浏览器默认样式的影响。CSS Reset 通常包含大量的样式重置和基础样式定义，但是却没有针对各个元素的个性化样式。
例如，下面是一段常见的 CSS Reset：
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form,
fieldset, input, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}此时，所有元素的 margin 和 padding 值都被设置为 0，这将导致许多 HTML 元素的样式被大幅更改。由于 CSS Reset 并没有预定义任何元素的具体样式，开发者需要自行添加样式，以满足项目需求。
CSS Normalize
CSS Normalize 的思想则是让浏览器默认样式保留，但是使用通用的样式，来确保在各个浏览器和操作系统下，元素呈现的一致性。
CSS Normalize 对默认样式进行了优化和修正，例如，将所有元素的字体大小设置为 100%，更正了表单元素的字体大小和行高，修复了某些浏览器的 BUG 等等。同时，CSS Normalize 也为各个元素定义了一些通用的样式，如字体颜色、背景颜色、对齐方式等等。
例如，下面是一段常见的 CSS Normalize：
-- -------------------- ---- ------- ---- - ---------- ----- ------------ ---- ------------------------- ----- --------------------- ----- ---------------------------- ------------ - ---- - ------- -- - -------- ------ -------- ----------- ------- ------- ------- ----- ----- ---- -------- ------- - -------- ------ - ------ ------- --------- ----- - -------- ------------- --------------- --------- - --------- -------- - -------- ----- -
此时，所有元素都保留了浏览器默认样式，但是使用了一组统一的基础样式，确保元素在各个浏览器中显示的一致性。
如何选择？
CSS Reset 和 CSS Normalize 在功能上存在差异，但是实际的开发中，两者的使用效果是类似的。因此，选择哪种方案，需要根据项目需求来进行权衡。
如果开发者希望对所有元素的样式有着更细致的控制，那么使用 CSS Reset 是一个更好的选择。在此基础上，开发者可以逐步添加个性化的样式，根据项目需求进行自定义。
如果开发者更加注重页面在各个浏览器和操作系统下的兼容性，那么使用 CSS Normalize 是一个更好的选择。它保留了浏览器默认样式，同时使用通用的基础样式，确保元素在不同浏览器下呈现一致。
总结
CSS Reset 和 CSS Normalize 都是非常有用的前端工具，能够消除浏览器默认样式的影响，统一页面元素的样式，提高项目开发的效率。开发者应该根据项目需求，选择适合自己的方案，同时在开发过程中，逐步优化和自定义样式，以确保更好的用户体验。
示例代码
CSS Reset
-- -------------------- ---- ------- -- --------- -- ----- --- --- --- --- --- --- -- ----------- ---- --- --- --- --- ------- --- --------- ------ - ------- -- -------- -- - --- --- --- --- --- -- - ---------- ----- ------------ ------- - -- - ----------- ----- - ------- ------ ------- -------- - ------- -- - ---- - ----------- ----------- - -- --------- ------- - ----------- -------- -
CSS Normalize
-- -------------------- ---- ------- -- ------------- -- ---- - ------------ ----- ------------------------- ----- - ---- - ------- -- - - - ----------------- ------------ ---------------- ----- - ------------ ------------------------- - ---------------- ---------- ---------------- --------- ------- ------- ----- -------------- -- ------------------------- ----- - -- ------ - ------------ ------- - ----- ---- ----- --- - ------------ ---------- ---------- ---------- ---- - ----- - ---------- ---- - ---- --- - --------- --------- ---------- ---- ------------ -- --------------- --------- - --- - ------- -------- - --- - ---- ------- - --- - ------------- ----- - ------- ------ --------- ------- -------- - ------------ -------- ---------- ----- ------------ ----- ------- -- --------------- ----- - ------- ----- - --------- -------- - ------- ------ - --------------- ----- - ------ - ---------- ------- - ------- ---------------- --------------- --------------- - ------------------- ------- - ---------------------- ------------------------------- ------------------------------ ------------------------------ - ------- -------- - ------------------ - ------------- ----- -------- -- - --------------- - -------- --- ------ ----------- - ---------------- - ----------- ----- - ------ - ------ -------- -------- ------ ---------- ----- ------------ ------- - -------- - --------------- --------- - ---------------------------- --------------------------- - ------- ----- - --------------- - ------------------- ---------- --------------- ----- - --------------------------- - ------------------- ----- - ---------------------------- - ------------------- ------- ----- -------- - ------- - -------- ------ - ------- - -------- ---------- - -------- - -------- ----- - -------- - -------- ----- -
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d38842b5eee0b525b2bc22