前言
在前端开发中，CSS 样式的重置或者初始化是必不可少的一环。CSS Reset 和 normalize.css 是两种常见的样式重置方案，本文将详细介绍它们的区别和使用场景。
CSS Reset
CSS Reset 是一种通过将所有元素的默认样式都设置为相同的值来重置样式的方法。其主要思想是将所有元素的样式都重置为一致的状态，然后再按照需要重新定义样式。这种方法可以避免出现浏览器之间的样式差异，保证网站在不同浏览器中呈现一致的效果。
以下是一个基本的 CSS Reset 样式：
* {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-weight: normal;
vertical-align: baseline;
}这个样式将所有元素的 margin、padding、border、font-size、font-weight 和 vertical-align 都设置为了默认值。
CSS Reset 的优点是可以完全自定义样式，不会受到浏览器默认样式的影响。但是，由于它将所有元素的样式都重置为一致的状态，可能会导致一些细节方面的问题，需要开发者手动去调整。
normalize.css
normalize.css 也是一种样式重置方案，但与 CSS Reset 不同的是，normalize.css 的重点在于保持浏览器样式的一致性，而不是完全重置所有元素的样式。
normalize.css 主要解决了以下问题：
- 保持跨浏览器的一致性。normalize.css 对于不同浏览器的默认样式做了统一处理，使得网站在不同浏览器中呈现一致的效果。
- 修复常见的浏览器样式 bug。normalize.css 修复了一些常见的浏览器样式 bug，例如 IE6 中的 inline-block 和 table-cell，FireFox 中的 overflow 和 vertical-align 等等。
- 保持有用的默认样式。normalize.css 保留了一些有用的默认样式，例如 h1~h6 的字体大小和行高，input 和 button 的默认样式等等。
以下是一个基本的 normalize.css 样式：
-- -------------------- ---- ------- -- ------------- ------ -- -- ---------------------------------------- -- -- -------- -------------------------------------------------------------------------- -- --- - -- ------- --- ---- ------ -- --- --------- - -- ------- ----------- -- ---- ---- ----- ----------- ------- -- ---- -- ---- - ------------ ----- -- - -- ------------------------- ----- -- - -- - -- -------- -------------------------------------------------------------------------- -- --- - ------ --- ------ -- --- --------- -- ---- - ------- -- - -- -------- ------- -------------------------------------------------------------------------- -- --- - ------ --- ------ -- --- --------- -- -- - ------- -- - -- ---------- --------- -------------------------------------------------------------------------- -- --- - -- --- --- ------- ---- ---------- -- ----- --- --- ------- - -- --- --- ------- ---- ------ -- ------- ----- --- ------- -- ----------- - ---------------- --------- ------- - --- - ------- --- --------- ----------- -- -------- -- --- ---- ---- -- ------- -- -- ------ - ------------ ------- - --- - --- --- ------- ---- ---- -- --- --------- -- ----- ---- ---- - ---------- ---- - --- - --- --- ------- ---- ---- -- --- --------- -- ----- - ---------- ---- - --- - ------- ----- --- ----- -------- ---- --------- --- ---- ------ -- - --- --------- -- ---- --- - ---------- ---- ------------ -- --------- --------- --------------- --------- - --- - ------- -------- - --- - ---- ------- - -- -------- ------- -------------------------------------------------------------------------- -- --- - ------ --- ------ -- ------ ------ ----- -- -- --- -- --- - ------------- ----- - -- ----- -------------------------------------------------------------------------- -- --- - -- ------ --- ---- ------ -- --- --------- - -- ------ --- ------ -- ------- --- ------- -- ------- ------ --------- ------- -------- - ------------ -------- -- - -- ---------- ----- -- - -- ------------ ----- -- - -- ------- -- -- - -- - --- - ---- --- -------- -- --- - -- ---- --- -------- -- ----- -- ------- ----- - -- - -- --------- -------- - --- - ------ --- ----------- -- ---- --------- -- ----- -------- --- --- - -- ------ --- ----------- -- ---- --------- -- -------- -- ------- ------ - -- - -- --------------- ----- - --- - ------- --- --------- -- ----- --------- ----- -- --- --- ------- -- ------- ---------------- --------------- --------------- - ------------------- ------- - --- - ------ --- ----- ------ --- ------- -- -------- -- ------------------ - ------------- ----- -------- -- - --- - ------- --- ----- ------ ----- -- --- -------- ---- -- -------- -- --------------- - -------- --- ------ ----------- - --- - ------- --- ---- -------- -- ---- --- --- -- ----------------------- - ------ -------- -------- ---- - ----------------------- - ------ -------- -------- ---- - --- - ------ --- ------- -- -- --- -- ---------------------- - ------ -------- -------- ---- - --- - ------ --- ------ -- -- --- -- ---------------------------- - ------- -- - -- ----------- -------------------------------------------------------------------------- -- -- - --- --- ------- ------- -- ----- -- -- -------- --- -------- -- ------- - -------- ------ - -- - --- --- ------- ------- -- --- --------- -- ------- - -------- ---------- - -- ---- --- ----- - ------------- ------------- ----- ------------------------ -- --------------------------- ------------------------------------- ------------------------------------------------ -- -- ----- --- ----- - ------------- ------------------------------------------------------------------------ - ------------------------------------------------------------------------------ -------- ------------------------------------------------------------------------------------------------------------------------
