什么是 CSS Reset？
CSS Reset 是一种处理浏览器默认样式的方法。浏览器在渲染 HTML 元素时会给这些元素默认的样式，这些样式可能在不同的浏览器中存在差异，这就会导致网站在不同浏览器下的样式表现不一致。需要使用 CSS Reset 来重置这些不同浏览器之间的差异，保证网站在各个浏览器中表现一致。
常见的 CSS Reset 工具有 Normalize.css、Reset.css、Eric Meyer’s Reset CSS 等。这些工具会给所有 HTML 元素一个相同的样式表，以确保在不同的浏览器中表现一致。
CSS Reset 对网站样式的影响
CSS Reset 会重置浏览器默认的样式表，也就是清除浏览器对 HTML 元素的默认样式。这虽然可以确保网站在不同的浏览器中表现一致，但也会导致一个问题：网站样式过于简洁。
在应用 CSS Reset 之后，网站中的所有元素都没有样式，这意味着我们需要重新编写样式来定义网站的整体布局、颜色、字体、边框等各种样式。这是一个耗时的过程，需要对 CSS 有深入的了解，否则可能会导致样式设计上的问题。
如何避免过于简洁的样式
虽然 CSS Reset 可能会导致网站样式过于简洁，但是我们可以采用一些方法来避免这样的问题。
1. 样式表使用前先考虑设计
在应用 CSS Reset 之前，最好考虑网站整体的设计风格，以确保定义的样式表能够满足网站的设计需要。这可以帮助我们避免在应用 CSS Reset 之后重新编写大量的样式表。
2. 尽量少用通配符
使用通配符可以为所有元素定义一样的样式，但是这也会导致网站样式过于简洁。尽量避免使用通配符，而应该使用类、ID 选择器等更为具体的选择器来定义样式。
3. 选择合适的 CSS Reset 工具
不同的 CSS Reset 工具有不同的样式表设置，我们应该选择适合我们的工具，并且了解其设置的具体内容。例如，Normalize.css 在重置样式表的同时，也在保留了一些常用的样式。
示例代码
下面是一个使用 Normalize.css 的简单示例：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- -------------- ------------- ----- ---------------- --------------------- ------- ---- - ------------ ------ ----------- ----------------- -------- - ------ - ----------------- ----- ------ ------ - --- -- - ----------- ----- ------- -- -------- -- -------- ----- ---------------- -------------- - --- -- -- - ------- - ----- - --- -- -- - - ------ ------ ---------------- ----- - ---- - -------- ----- ---------------- ------- ------------ ------- ------- ------ - -- - ---------- ----- ------ ----- - -------- ------- ------ -------- ----- ---- ------ ---------------------- ------ ----------------------- ------ ------------------------- ----- ------ --------- ------ ----------- -- -- ------------ ------- ------- -------展开代码
在这个示例中，我们使用 Normalize.css 来重置浏览器默认样式表，定义了一些简单的样式来实现网站的布局、颜色、字体等。虽然我们使用了 CSS Reset 工具，网站的样式依然相对简单，但是这里的样式表已经足够完成一个简单网站的设计。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c00a44314edc2684613c9e
