作为前端开发人员，我们经常需要重置 CSS 样式来克服浏览器之间的差异，以确保我们的网站在所有浏览器中的一致性。在这方面，有两种主要的方法：CSS Reset 和 normalize.css。
但是，这两种方法都有其优点和缺点。CSS Reset 会完全重置样式，并让开发人员从头开始构建自己的样式。另一方面，normalize.css 尝试通过保留有用的默认值来纠正浏览器之间的差异，并提供一个更稳定、一致性更高的页面基础。
在本文中，我们将探讨如何魔改这两种方法，以使它们能够适应我们的个人项目需求。
CSS Reset
CSS Reset 是通过覆盖浏览器默认样式来消除浏览器差异的一种方法。CSS Reset 可以让你从头开始设计你的样式，从而避免浏览器默认值对你的样式造成干扰。以下是一个简单的 CSS Reset：
// javascriptcn.com 代码示例
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, font, 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;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}CSS Reset 是一种有效的方法，但它可能会引入一些不必要的代码和麻烦。例如，如果你想要在多个元素上添加 margin 和 padding，你需要为每个元素添加这些属性，这可能会导致大量冗余代码。另外，CSS Reset 还会清除一些有用的属性和值，例如字体样式和行高，需要你自己重新添加。
为了解决这些问题，我们可以使用魔改后的 CSS Reset。我们可以为不同元素组合属性，为所有元素添加默认样式，从而简化代码，并删除我们不需要的样式。并且，我们可以增强我们的默认样式或者在需要的时候手动添加一些样式。下面是我们魔改后的 CSS Reset：
// javascriptcn.com 代码示例
/* Box sizing border-box model */
*,
*::before,
*::after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
/* Normalize html, body */
html, body {
margin: 0;
padding: 0;
}
/* Headers and text */
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin-top: 0;
margin-bottom: 1rem;
font-weight: 400;
line-height: 1.3;
}
/* Lists */
ul,
ol,
dl {
margin-top: 0;
margin-bottom: 1rem;
}
/* Links */
a {
color: #007bff;
text-decoration: none;
background-color: transparent;
}
a:hover {
color: #0056b3;
text-decoration: underline;
}
/* Images */
img {
vertical-align: middle;
border-style: none;
}
/* Table */
table {
border-collapse: collapse;
}
th,
td {
padding: 0;
text-align: left;
}
/* Forms */
input,
button,
textarea,
select {
font-size: 100%;
margin: 0;
vertical-align: middle;
}以上样式基于最新版本的 Bootstrap 框架头文件，接下来我们将解析这个样式表的每个部分。
在本示例中，我们使用了 box-sizing，默认为 inherit 设置，为所有元素使用边框框模型。在 HTML 根元素上使用 border-box，避免了子元素一个个进行调整。这样做，可以更准确地设置元素的大小并避免不必要的轻微偏移和计算错误。
在 HTML 和 body 元素上，我们使用了 margin 和 padding 的 0 值，避免这些元素的浏览器默认值。这里不会覆盖其他元素的默认样式，只是针对 HTML 根元素设置了一个完美的页面布局样式。
在我们的文本元素中，我们将 margin-top 设置为 0，margn-bottom 设置为 1rem。这样做是为了避免元素之间的空隙，确保整个网站布局的一致性。我们使用了一个基本的字重和 line-height，并在列表上使用相同的间距。
对于链接，我们先使用一个蓝色，后松散。当链接被鼠标悬停时，我们对其进行了一些细微的更改，以确保链接更加可读性和易于识别。
对于图像，我们希望元素是居中的且没有任何不必要的轮廓线。
针对表格和表单元素，我们使用非常基本和最小的样式，使它们看起来更加清晰且更易于识别。
魔改一些 CSS Reset 的属性，我们可以简化代码并防止删除了有用的样式属性。同时，在需要的地方添加样式，可以使魔改后的样式表更契合你的个人项目需求。
Normalize.css
Normalize.css 是一种通过打补丁来纠正浏览器默认值的 CSS 文件。Normalize.css 和 CSS Reset 类似，为浏览器控制的样式创建了一个基础，但它尝试通过保留默认样式效果来确保最大限度的可定制性和灵活性。
Normalize.css 不仅仅是一组样式重置或重置CSS。相反，它是一个包含几乎所有HTML元素的归一化样式表，用于纠正浏览器之间的差异，并添加有用的默认样式。Normalize.css 甚至包含在内置浏览器样式之间没有一致性的属性，如 line-height，vertical-align 或 table-display。
与 CSS Reset 相比，Normalize.css 提供了更好的默认值。这意味着它为您的网站提供了更稳定、一致的基础。它不像 CSS Reset 那样删除有用的属性或防止许多可重用的样式。
以下是 Normalize.css 提供的样式补丁，以便在不同的浏览器中显示更一致的内容：
// javascriptcn.com 代码示例
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers (opinionated).
*/
body {
margin: 0;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* Address `outline` inconsistency between Chrome and Firefox.
*/
a:focus {
outline: thin dotted;
}
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers (opinionated).
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
*/在实际使用中，Normalize.css 可以非常好地解决浏览器之间的样式差异，并提供相当稳定和一致的基础。魔改下以下代码，也可以让 Normalize.css 更符合你的需求：
// javascriptcn.com 代码示例
/* Mainly from normalize.css */
/* Zero everything to start with */
* {
margin: 0;
padding: 0;
border: 0;
}
/* Fix box sizing */
*, *::before, *::after {
box-sizing: border-box;
}
/* Set font-related properties */
:root {
font-size: 16px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
line-height: 1.5;
color: #333;
background-color: #fff;
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
margin-top: 0;
margin-bottom: 0.5rem;
line-height: 1.25;
}
p {
margin: 0 0 1.5rem;
}
/* Imagery */
img {
display: block;
max-width: 100%;
height: auto;
}
/* Lists */
ul {
margin-bottom: 1rem;
}
ol {
margin-bottom: 1rem;
}
/* Links */
a {
color: #007bff;
text-decoration: none;
background-color: transparent;
}
a:hover {
color: #0062cc;
text-decoration: underline;
}
/* Forms */
button, button:disabled, input[type="button"], input[type="reset"], input[type="submit"] {
background-color: #007bff;
border-color: #007bff;
color: #fff;
}
button:hover, button:focus, button:active:disabled, input[type="button"]:hover, input[type="button"]:focus, input[type="button"]:active:disabled, input[type="reset"]:hover, input[type="reset"]:focus, input[type="reset"]:active:disabled, input[type="submit"]:hover, input[type="submit"]:focus, input[type="submit"]:active:disabled {
background-color: #0069d9;
border-color: #0062cc;
color: #fff;
}
button.disabled, input[type="button"].disabled, input[type="reset"].disabled, input[type="submit"].disabled, button:disabled, input[type="button"]:disabled, input[type="reset"]:disabled, input[type="submit"]:disabled {
opacity: .65;
}
input[type="checkbox"], input[type="radio"] {
margin-top: 0;
margin-right: 0.3125rem;
margin-bottom: 0;
margin-left: 0;
}在这个样式表中，我们基于了 Normalize.css，正如我们所见，它包含了 HTML 元素的几乎所有默认样式，并在各个浏览器之间引入修复补丁，用来纠正一些不一致的样式表现。
我们没有删除任何元素或修补原始样式，同时我们也修改了一些属性以使此样式符合我们的需求，例如更改了标头的字体大小和粗细、颜色、行高等设置，以适合我们的具体项目。
总结
通过魔改，我们可以自定义定制化我们需要的 CSS Reset 和 Normalize.css，使这些样式表更符合我们的需求，并在我们的项目中添加更好的样式表现性质，同时避免删除一些我们需要的样式属性。通过改变默认值、增强样式、添加文档样式和保留有利的属性，魔改可提供更流畅、可维护和易于使用的 CSS 样式表。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65435fb07d4982a6ebd1822e