常见的 CSS Reset：Eric Meyer's、YUI、Bootstrap、Foundation
在前端开发中，CSS Reset 是解决网页样式在不同浏览器间不一致的问题的一个重要工具，它能够让网页在各种浏览器中拥有一致的基准样式。目前比较常用的 CSS Reset 常见于 Eric Meyer's、YUI、Bootstrap 和 Foundation 等，在本文中，我们将对这些 Reset 进行详细介绍。
Eric Meyer's Reset
Eric Meyer's CSS Reset 是最早出现的 Reset。它可以设定大量的标签样式，使得所有浏览器都有一个统一的基础样式。由于 Eric Meyer 及其 Reset 的影响和普及，所以现在的大部分 Reset 都是基于它演化而来的。
下面是 Eric Meyer's Reset 的样式代码：
-- -------------------- ---- ------- ----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- -- - ------- -- -------- -- ------- -- ---------- ----- ------------ ------- --------------- --------- - -- ----- ------------ ----- --- ----- -------- -- -------- ------ -------- ----------- ------- ------- ------- ------- ----- ---- ------- - -------- ------ - ---- - ------------ -- - --- -- - ----------- ----- - ----------- - - ------- ----- - ------------------ ----------------- --------- ------- - -------- --- -------- ----- - ----- - ---------------- --------- --------------- -- -
可以看到，Eric Meyer's Reset 对大多数标签设定了基本样式，如 margin、padding、font-size、line-height 等。
YUI Reset
YUI Reset 是 Yahoo User Interface（简称 YUI）的一部分，它比 Eric Meyer 的 Reset 更完整和实用，具有更好的扩展性，可以更方便地添加自定义样式。
下面是 YUI Reset 的样式代码：
-- -------------------- ---- ------- --------------------------------- --------------------------------------- ---------------------------- ----------------------------------------------------- ----------------------- ------------ -------------------------------------- ---------- ----------------------- -------------- ----------------------- ----------------- ------------------------------------- -----------------
可以看到，YUI Reset 进行了明确的注释并提供了更专业的处理方法，如去除钩子和下划线，使用合适字号等。
Bootstrap Reset
Bootstrap Reset 的目标是提供一个干净、简单、灵活的基础，它并不是一个完整的 Reset，而更像是一组基础 CSS 样式，可以在它的基础上进行进一步开发。
下面是 Bootstrap Reset 的样式代码：
-- -------------------- ---- ------- ---- - ------------ ----------- --------------------- ----- ------------------------- ----- - ---- - ------- -- ------------ ---------- ------ ---------- ------ ----------- ---------- ----- ------------ ----------- ------ ----- ----------------- ----- - -----
可以看到，Bootstrap Reset 对字体、Body 样式等进行了设定，并且通过使用变量为用户提供了更好的可定制性。
Foundation Reset
Foundation Reset 与 Bootstrap Reset 相似，是一个基础的 CSS 样式，比 Bootstrap Reset 更为简单和轻量级，但也提供了一定程度的定制性。
下面是 Foundation Reset 的样式代码：
-- -------------------- ---- ------- ---- - ----------- ----------- ---------- ----- ----- - -- --------- ------- - ----------- -------- - ---- - ------- -- ---------- ----- ------------ ---- - -----
可以看到，Foundation Reset 与其他 Reset 一样对字体、Body 做了设定，并且使用了 box-sizing 等属性为用户提供了更灵活的布局方式。
总结：
以上是常见的 CSS Reset 以及他们的样式示例，这些 Reset 各有特点，用户可以根据自己的项目需要选择合适的 Reset。通过选择一个合适的 Reset，开发人员可以使网页样式在不同浏览器间拥有一致的基准样式，提高开发效率，更好地促进用户体验。我们也可以从这些 Reset 中学习到如何更好地优化 CSS 样式，从而更好地适应不同的项目需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6517b41495b1f8cacdfdda50