前言
在开始讲解量身定制最适合的 CSS Reset 之前，我们先来看看什么是 CSS Reset。
CSS Reset 是一种重置浏览器默认样式的方法，旨在解决浏览器之间样式不一致的问题，使得网页在不同浏览器下显示效果一致。
然而，还存在一个问题：重置后，样式变得更加统一，但也失去了很多默认的样式效果，导致页面布局变得笨拙并且需要耗费更多的时间来编写 CSS。
因此，我们需要针对具体项目需求来量身定制最适合的 CSS Reset。
参考现有的 CSS Reset
在开始定制之前，先从现有的 CSS Reset 中选择一个基础版本。
以下是一些流行的 CSS Reset：
normalize.css：一个专门针对浏览器样式的样式表，修复了浏览器的 bug 并提供了一些优秀的默认样式。reset.css：将一些元素的默认样式重置为 0 或其他经过测试的值。minireset.css：一个非常小巧的 CSS Reset，只包含少量的基础样式。
可以根据项目需求，选择最适合的 CSS Reset，并将其作为基础版本。
消除不必要的样式
已有的 CSS Reset 可能会提供许多您不需要的样式。因此，在量身定制自己的 Reset 的过程中，应该将这些样式从基础版本中移除，以减少无用样式的噪声。
考虑以下两个例子：
/* Base Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}/* Custom Reset */
input[type="checkbox"],
input[type="radio"]{
margin: 0;
padding: 0;
}在第一个例子中，我们的基础版本会将所有元素的外边距和内边距都设置为 0，包括 input[type="checkbox"] 和 input[type="radio"]，这可能会导致前者和后者之间的样式差异。因此，在我们的定制版本中，我们将移除对 input[type="checkbox"] 和 input[type="radio"] 元素设置的外边距和内边距，以使其保留默认的样式。
增加必要的样式
在移除不必要的样式后，我们就可以开始增加必要的样式。
考虑以下两个例子：
-- -------------------- ---- ------- -- ---- ----- -- ------- --------------------- -------------------- - ------------------- ------- - --- - ---------- ----- ------- ----- -
-- -------------------- ---- ------- -- ------ ----- -- ------ - ---------- ----- -------- --- ----- ------- ----- ----------------- -------- ------ -------- -------------- ---- - --------------------- -------------------- - ---------- ----- ------- -- -------- --- ----- ------- ----- ----------------- -------- ------ -------- -------------- ---- - --- - ---------- ----- ------- ----- -------- ------ ------- - ----- -
在第一个例子中，基础版本为 button，input[type="button"] 和 input[type="submit"] 提供了一个默认外观，并设置了 img 元素的最大宽度为 100%。
在第二个例子中，我们定制了 button，input[type="button"] 和 input[type="submit"] 的字体大小、边距、背景色和文本颜色。我们还为 img 添加了一个居中的 margin 样式，以使其在页面中水平居中。
结论
通过定制最适合您的 CSS Reset，可以使您的页面在不同浏览器下显示效果一致，并提高开发效率。记住，根据项目需求，选择一个适合的基础版本，并移除不必要的样式，增加必要的样式以使其适应您的项目。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66ee8d686fbf960197243108