什么是 CSS Reset？
CSS Reset（CSS 重置）是一种重置浏览器默认样式的技术，通过将元素的默认样式全部清除，统一页面中的样式，避免浏览器间的差异，使网页的显示效果更加稳定。但是，在使用了 CSS Reset 的情况下，可能会出现页面空白的问题。
CSS Reset 造成的页面空白问题
当我们在页面中使用 CSS Reset 后，所有元素的样式都被清空了，此时如果没有正确地设定元素的样式，就会出现页面空白的问题，因为这些元素的默认样式已经被清除，如果没有针对这些元素重新设定样式，它们将不会显示在页面中。
如何解决 CSS Reset 造成的页面空白问题
下面是一些解决 CSS Reset 造成的页面空白问题的方法：
1. 使用 Normalize.css
Normalize.css 是一种在 CSS Reset 基础上进行改良的 CSS 库。它解决了大多数浏览器的一些 bug，同时保留了有用的默认样式，使得开发者能够在更稳定的基础上进行开发。使用 Normalize.css 可以便捷地解决 CSS Reset 造成的页面空白问题。
以下是使用 Normalize.css 的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ---------------- ------------------------------------------------------------------------------- --
-------
-- ----------- --
--------
-------
------
---- ------ ---- -- ---
-------
-------2. 自定义样式
如果我们不想使用 Normalize.css，我们可以手动对页面中的元素进行设置。但是由于每个元素的默认样式都不同，我们需要针对每个元素进行重新设定样式。以下是一个使用自定义样式解决 CSS Reset 造成的页面空白问题的示例：
-- -------------------- ---- ------- -- -- ---- - ----------------- -- ----- ---- - ------ ----- ------- ----- ---------- ----- - -- -------------------- -- -- -- ---- - ------------ ------ ---- ------- ------- -------- ----------- ------ ----- - -- -- --- - ----------- - -- ---- ----- - ------- -- - -- ----------------- -- ---------- - ------ ----- ------- ----- ------- -- -------- -- -
3. 使用好的框架
对于大型项目来说，我们可以使用常用的 CSS 框架，如 Bootstrap、Foundation 等，这些框架已经很好地解决了浏览器兼容性和页面空白问题，同时也提供了很方便的组件和布局，能够极大提高开发效率，是一个好的选择。
总结
CSS Reset 的使用能够使页面的样式更稳定，但是它也可能会造成页面空白的问题，本文介绍了一些解决这个问题的方法：使用 Normalize.css、自定义样式和使用好的框架。希望这些方法能够帮助你更好地开发页面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646ec881968c7c53b0d1a9bc