CSS Reset 和 Normalize.css 都是用于解决浏览器默认样式的问题，让网页在各种浏览器中呈现出一致的样式。本文将介绍 CSS Reset 和 Normalize.css 的差异和应用场景，帮助读者选择适合自己的样式重置方案。
CSS Reset
CSS Reset（样式重置）是用于重置浏览器默认样式的文件，包括所有 HTML 元素的样式和布局。其目的是消除浏览器对不同 HTML 元素默认样式之间的差异，以便在不同浏览器上创建一致的网页。它会清除所有元素的 margin, padding, border, font-size, font-family, font-weight 等属性，使得网页设计者可以从头开始构建自己的样式。
以下是一个简单的 CSS Reset 样式：
-- -------------------- ---- ------- ----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- -- - ------- -- -------- -- ------- -- -------- -- ---------- ----- --------------- --------- ----------- ------------ -
需要注意的是，CSS Reset 可能会导致某些元素样式变得很奇怪。比如说，将所有元素的字号设为 100% ，有些块级元素会把代码换行，导致排版不美观。
Normalize.css
与 CSS Reset 不同，Normalize.css 的目的是保留有用的默认样式，同时修复浏览器之间的差异。它通过为 HTML 元素提供一个更一致的默认样式，建立一个基准线（baseline），方便网页设计者构建脱离浏览器默认样式的网站。
以下是一个简单的 Normalize.css 样式：
-- -------------------- ---- ------- -- ----- ------ - ------- -- - - ------- -- -------- -- ----------- ----------- - -- ----------- -- ---- - ------------ ----------- ---------- ----- ------------ ------- - -- ------- -- ----- ---- - ----------- ------- - -- ---------- -- ------- ------ --------- ------- -------- - ------------ -------- ---------- -------- ------------ -------- -
需要注意的是，Normalize.css 可能会导致某些元素样式变得很奇怪，并且由于它保留了默认样式，所以需要掌握一定的 CSS 知识才能正确利用它。
应用场景
所以，CSS Reset 和 Normalize.css 在不同场景中应用得不同。
适用于 CSS Reset 的场景包括：
- 构建自动化工具库，需要控制每个组件的样式；
- 开发纯粹的响应式试验版，不希望被任何默认样式限制。
适用于 Normalize.css 的场景包括：
- 开发标准的、可复用的组件库，需要提供一个一致的样式基准线；
- 开发城市移动端，需要保留一些有用的默认样式，而响应式设计则需要用 CSS 控制。
结论
在选择 CSS Reset 和 Normalize.css 时，需要考虑自己的需求和项目的实际情况。如果是针对特定的应用场景开发，选择样式重置文件，如果要开发标准的、可复用的组件库，则选择 Normalize.css，以便提供一个一致的样式基准线。在任何情况下，正确地重置和管理样式表都是一个重要的前端工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67710fd56d66e0f9aacb75f1