在前端开发中，我们常常需要使用 CSS 来为网页添加样式。但是由于不同的浏览器对 CSS 的解析存在差异，所以我们需要先对它们进行一些初始化和重置。目前，市场上有三种比较流行的 CSS 初始化方案：CSS Reset、Normalize.css 和 Reset.css。本文将对这三种方案进行详细的比较，并给出相应的学习和指导意义。
CSS Reset
CSS Reset 的思想就是将所有的元素样式都重置为相同的值，然后再自己定义需要的样式。CSS Reset 不需要考虑浏览器的兼容性，但是需要分别为不同的元素设置样式。以下是一个简单的 CSS Reset 示例代码：
-- -------------------- ---- -------
----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ----- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- -- -
------- --
-------- --
------- --
-------- --
---------- -----
--------------- ---------
----------- ------------
-Normalize.css
Normalize.css 是一个相对较新的 CSS 初始化方案，它的目标是尽可能地保持浏览器的默认样式，并且在此基础上进行一些优化和修复。相比于 CSS Reset，Normalize.css 的主要优势在于它可以保留有用的浏览器默认样式，并尝试修复在不同浏览器下的兼容性问题。
Normalize.css 提供了一个很好的默认样式，可以大大减少我们编写样式的工作量。以下是一个 Normalize.css 示例代码：
-- -------------------- ---- ------- --- ------------- ------ - --- ------- - -------------------------------- -- -- -------- -------------------------------------------------------------------------- -- --- - -- ------- --- ---- ------ -- --- --------- - -- ------- ----------- -- ---- ---- ----- ----------- ------- -- ---- -- ---- - ------------ ----- -- - -- ------------------------- ----- -- - -- - -- -------- -------------------------------------------------------------------------- -- --- - ------ --- ------ -- --- --------- -- ---- - ------- -- - --- - ------ --- ------ ------- ------------ -- --- -- ---- - -------- ------ - --- - ------- --- ---- ---- --- ------ -- ---- -------- ------ --------- --- - --------- -------- -- ------- -------- --- ------- -- -- - ---------- ---- ------- ------ -- -
Reset.css
Reset.css 是一种将所有元素样式都重置为相同值的 CSS 初始化方案，类似于 CSS Reset。与 CSS Reset 不同的是，Reset.css 的重置样式更加彻底，并且同样需要自己再定义所需要的元素样式。以下是一个 Reset.css 示例代码：
html, body, div, span, 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, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
body {line-height:1}
ol, ul {list-style:none}
blockquote, q {quotes:none}
blockquote:before, blockquote:after,q:before, q:after {content:'';content:none}
table {border-collapse:collapse;border-spacing:0}对比分析
考虑到我们在实际开发中需要进行浏览器兼容性的处理，Normalize.css 也在样式上做了很多优化，推荐使用 Normalize.css。
在开发实际中，也有用户习惯不同，比如在使用 input[type="button"] 标签时，IE 浏览器默认按钮样式是带有 boder-radius 圆角的，而普通浏览器不是。而使用 Reset.css 后，input[type="button"] 标签会丧失这种带有圆角的效果，所以这时您可以选择加动态样式或者选择添加特定的 Reset 样式。
最后，综合考虑到现代浏览器越来越趋于标准化，建议在浏览器兼容性与代码可维护性上进行权衡，选择使用 Normalize.css 作为您的 CSS 初始化方案。
总结
CSS Reset、Normalize.css 和 Reset.css 都是常用的 CSS 初始化方案，在实现上都有其独特的思想和优劣点。在实际开发中可以根据情况进行选择，综合考虑浏览器兼容性、代码维护性和用户习惯等多种因素。
以此为例，我们在前端开发中需要经常进行技术原理的比较和选择，以达到更好的效果和用户体验。秉承理论结合实践的原则，我们需要根据具体情况学习选择合适的技术方案，以此来提升我们的职业能力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6458a820968c7c53b0afd2d4