引言
一个 web 页面在加载时，默认会受到浏览器的一些默认样式影响。如果不进行样式重置，会导致网页的样式出现不符合设计标准、不一致的情况。因此， CSS Reset 就应运而生。本文将详细讲解 CSS Reset 的原理、用法及示例。
什么是 CSS Reset？
CSS Reset（CSS 重置）是一种技术方法，它的主要作用是将所有 HTML 标签的默认样式全部去除，以便我们根据自己的需求，重新定义网页的样式。
CSS Reset 是一个非常实用的技巧，对于开发者来说，CSS Reset 可以使你更好的控制页面的样式，提高网页的可维护性和浏览器的兼容性。
CSS Reset 的原理
CSS Reset 主要通过重置 HTML 元素的默认样式来达到去除浏览器默认样式的目的。
以下是一个非常简单的 CSS Reset，可以重置所有 HTML 标签的默认样式：
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
}上面的 CSS 代码重置了所有元素的外边距、内边距、边框以及字体大小，并使垂直对齐方式为基线对齐。
CSS Reset 的用法
在实际的开发工作中，我们通常会在样式表的开头写入 CSS Reset，以便更好的控制页面的样式。
以下是一个常见的 CSS Reset 样式代码：
-- -------------------- ---- ------- ----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ----- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- -- - ------- -- -------- -- ------- -- ------------ -------- ---------- ----- ----------- -------- ------------ -------- ------------ -------- --------------- --------- -
上述代码中，所有元素的默认样式都被重置了。其中，margin、padding 和 border 被全部设置为 0，font-family、font-size、font-style、font-weight 和 line-height 等属性也被全部设置为 inherit，以便更好地控制样式。
需要注意的是，使用 CSS Reset 不等于清空所有样式和布局，在使用过程中需要根据需求来选择具体的 CSS Reset 样式。
CSS Reset 的示例
以下是一些常见的 CSS Reset，供开发者参考：
Eric Meyers Reset
该 Reset 是由 CSS 大神 Eric Meyers 提出的。
-- -------------------- ---- ------- ----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- --- -------- ------ ------- -------- ------ ------- ----------- ------- ------- ------- ----- ---- ------- ----- -------- -------- ----- ----- ------ ----- - ------- -- -------- -- ------- -- ---------- ----- ----- -------- --------------- --------- - -- ----- ------------ ----- --- ----- -------- -- -------- ------ -------- ----------- ------- ------- ------- ------- ----- ---- ------- - -------- ------ - ---- - ------------ -- - --- -- - ----------- ----- - ----------- - - ------- ----- - ------------------ ----------------- --------- ------- - -------- --- -------- ----- - ----- - ---------------- --------- --------------- -- -
Normalize.css
Normalize.css 是一个流行的 CSS Reset 样式，该样式尽可能的保持浏览器的默认样式，对于一些浏览器的特殊样式也进行了统一处理。
-- -------------------- ---- ------- --- ------------- ------ - --- ------- - -------------------------------- -- -- -------- -------------------------------------------------------------------------- -- --- - -- ------- --- ---- ------ -- --- --------- - -- ------- ----------- -- ---- ---- ----- ----------- ------- -- ---- -- ---- - ------------ ----- -- - -- ------------------------- ----- -- - -- - -- -------- -------------------------------------------------------------------------- -- --- - ------ --- ------ -- --- --------- -- ---- - ------- -- - --- - ------ --- ------ ------- ------------ -- --- -- ---- - -------- ------ - --- - ------- --- ---- ---- --- ------ -- ---- -------- ------ --------- --- - --------- -------- -- ------- -------- --- ------- -- -- - ---------- ---- ------- ------ -- - -- -------- ------- -------------------------------------------------------------------------- -- --- - ------ --- ------- --- ------ --- ------ ------ -- --- -- - ------- -- -------- -- - -- ---------- --------- -------------------------------------------------------------------------- -- --- - ------ --- ------- -------- --------- -- -- ---- -- -------- - --------- ----- - --- - -- --- --- ------- --- ------ -- -------- - -- ---- --- -------- -- ---- --- --- -- ------------------ -------------- - ----------- ----------- -- - -- -------- -- -- - -- - --- - ------- --- ------ ----- -- --------- --- --------- ------- -- ------- -- ------------------------------------------- ------------------------------------------ - ------- ----- - --- - -- ------- --- --- ---------- -- ------ --- ------- - -- ------- --- ------- ----- -- ------- -- --------------- - ------------------- ---------- -- - -- --------------- ----- -- - -- - --- - ------ --- ----- ------- --- ------ ------- -- ------ --- ------ -- ------ -- ---------------------------------------------- ------------------------------------------ - ------------------- ----- - --- - -- ------- --- --------- -- ----- --------- ----- -- --- --- ------- - -- ------ ---- ---------- -- --------- -- ------- -- ---------------------------- - ------------------- ------- -- - -- ----- -------- -- - -- - -- -------- ------- -------------------------------------------------------------------------- -- --- - ------ --- ------ -- ------ ------ ----- -- -- ---- -- --- - ------------- ----- - -- ----- -------------------------------------------------------------------------- -- --- - ----- --- ------- ------ ----- -- --- --------- -- ------- ------ --------- ------- -------- - ------- -- ------------ -------- ---------- -------- ------------ -------- - --- - ------- --- ----------- ---------- -- ------ --- ------- - ----- ------ --------------------------------------------------- -- ---------------- --------------- --------------- - ------------------- ------- - --- - ------ --- ----- ------- -- ------ --- ------ -- ------ -- --------------------------- - -------- -- - --- - -- ------- --- --------- -- ----- --------- ----- -- --- --- ------- - -- ------ ---- ---------- -- --------- -- ------- -- -------------- -------------- ------------------------ -------------- - ------------------- -------- -- - -- ----- -------- -- - -- - --- - ------ --- ----- ------ --- ------- -- --- -------- ------- -- -------- -- ------------------------ - ------------- ----- -------- -- - --- - ------- --- ----- ------- ------ ----- -- --- -------- ---- -- -------- -- --------------------- - -------- --- ------ ----------- - --- - ------ --- ----- ------- --- ------ -- ------- --- -- ------------------- ------------------ - -------- -- -- --------------------------- ------------------------ -- -------------------- ------ ----------- -- --------------------------- ------------------------ -- -------------- - ----------- - -- ------ -------------------------------------------------------------------------- -- --- - ------ --- ------ ------- -- --- --------- -- ----- - ---------------- --------- - --- - ------- -------- -- --------- -- ------- - -- ------ ------- -- --- --- -- -------- - -- ------ --- ------- ------ ---- -- -- ---- -- -------- - ------- --------- -- - -- - ------------------------------------------- ------------------------------------------ - ------------------- ------------------ ------- -- - --- - ------- --- ------ ----- -- --------- --- --------- ------- -- ------- -- ------------------------------------------- ------------------------------------------ - ------- ----- - --- - -- ------- --- --- ---------- -- ------ --- ------- - -- ------- --- ------- ----- -- ------- -- --------------- - ------------------- ---------- -- - -- --------------- ----- -- - -- - --- - ------ --- ----- ------- --- ------ ------- -- ------ --- ------ -- ------ -- ---------------------------------------------- ------------------------------------------ - ------------------- ----- -
结论
CSS Reset 是一种非常实用的技术方法，可以让我们更好的控制页面的样式，提高网页的可维护性和浏览器的兼容性。
在实际使用中，我们需要根据自己的需求来选择使用哪种 CSS Reset 样式，并结合具体的布局和设计要求进行合理的调整。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670f69995f551281026434a3