什么是 CSS Reset ？
当我们在编写 CSS 的时候，我们经常遇到一些样式表的默认设置。不同的浏览器默认设置可能不同，这可能会导致我们的元素在不同浏览器中具有不一致的外观和布局。
因此，CSS Reset 是一种用于重置浏览器的默认样式表的技术，以让我们从一个更加明确的起点开始进行样式的编写。
CSS Reset 的常见问题
在使用 CSS Reset 时，我们也要注意到以下常见问题。
虽然重置了默认样式，但是会失去一些基础的样式结构
虽然 CSS Reset 所做的是重置浏览器的默认样式，但是这里的 “默认样式” 包括了很多重要的样式，如标题的正常的字号，表单元素的对齐方式以及列表的缩进等。如果你完全重置所有样式，你需要自己手动定义这些样式。
CSS Reset 并不一定适用于所有的项目
每个项目都需要不同的 CSS Reset 方案，如果你使用错误的方案，会添加一些无谓的 CSS 代码。因此，你需要考虑每个项目的需要。
有些 Reset 方案重置了用来增加样式的 HTML 元素
不同的 Reset 方案有不同的一些细节。一些方案去除了用来设计样式的HTML元素，而另一些则重新定义了它们的样式。这可能会影响到我们写的 HTML 代码。
Reset 方案自动生成的默认样式表可能会过于复杂
一些自动生成的 Reset 方案会为每个元素生成许多 CSS 属性，并使用通配符 (*) 来选择每个元素。如果你使用这个方式，你可能会发现你的样式表很大。这样的 Reset 方案可能会影响到页面的性能。
如何编写 CSS Reset ？
编写好的 Reset 应该是：minimium，comprehensive 和 personalizaed。
Minimum（最低限度）
在 CSS Reset 中，我们仅重置了必要的样式，并尽可能减少对样式的影响。
/* 仅仅只应该重置每个标签的 margin 和 padding */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;background:transparent;}Comprehensive（全面）
在 Reset 中，我们可以清除所有的默认样式，从而给自己更多的自由空间来进行样式的设置。
-- -------------------- ---- ------- -- -------- -- -- ----------------------------------------- ---------- -- ----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- -- - ------- -- -------- -- ------- -- ---------- ----- ----- -------- --------------- --------- - -- ----------------- -- ---- - ------------ -- ----------------- ----- ------ ----- ---------- ----- -
Personalized（个性化）
个性化 Reset 可以根据项目的需要，自行添加一些样式来覆盖下面示例中未提到的样式。
/* 添加更多的样式，以适应项目需求 */
input[type="text"] {
border: 1px solid #333;
border-radius: 3px;
padding: 3px;
}再次强调：适用于你的项目
通过以上示例，我们可以看出，所有的 Reset 方案都有自己的一些优缺点。因此，必须以项目的需求为前提来进行 CSS Reset 的编写。
结论
在使用 CSS Reset 时，需要考虑项目的需求。
编写好的 Reset 应该是： minimum，comprehensive 和 personalized。
如果你的项目需要对某些元素进行自定义操作，你可能需要编写自己的 CSS Reset 方案。这样一来，我们就可以从一个更加明确的起点开始进行样式的编写。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6721a0832e7021665e084359