重置所有样式？从 Normalize.css 到 CSS Reset-JavaScript中文网-JavaScript教程资源分享门户

重置所有样式？从 Normalize.css 到 CSS Reset

前言

当我们开发一个新的Web项目时，浏览器样式会影响我们的网站的样式，即所有HTML元素具有默认样式。我们如何清空默认样式? 当然，Reset CSS和Normalize.css是解决这个问题的两种不同方法。在本篇文章中，我将为您介绍这两种方法的区别和如何在项目中使用它们。

什么是CSS重置（CSS Reset）？

CSS重置是指将所有默认样式重置为统一的或特定的样式，以保证在不同浏览器中所得的结果都是一致的。这种方法的主要目的是移除浏览器特定的默认CSS，常常出现的问题是每个浏览器的默认CSS不同，而且在某些情况下，还可能与系统默认的样式对冲。

目前已有很多现成的重置样式表可供使用，如Eric Meyer的Reset CSS，或是Yahoo的Reset CSS。以下是Eric Meyer的一小段代码：

    /*适用于Eric Meyer's  CSS Reset.2019年10月15日*/
    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;font-size: 100%;font: inherit;vertical-align: baseline;}

    /*增加一些通用样式,如容器宽度.2019年10月15日*/
    .container {max-width: 1200px; margin: 0 auto;}

在这个例子中，我们可以看到，它将所有元素的外边距，边框，内边距，字体大小和其他的一些设置设置为0或继承(parent element)。

虽然CSS重置能够完全控制网页的样式，但问题在于，我们使用的HTML元素在增加时需要重新指定样式。这是因为，它重置了每个元素的样式，因此我们需要重新设置每个元素各自的样式。这会导致在设计和编码过程中的困难。

何谓Normalize.css？

Normalize.css是一种新型的CSS重置方案，旨在在不破坏默认UI体验的基础上改善跨浏览器的一致性。与重置CSS不同，Normalize.css通过在默认的HTML元素样式上应用规则来修复和提强iOS，Android，Windows一体化，等其他平台，并提供了默认的排版设置和优化的CSS注释，以便更好地了解代码所呈现的作用。

现在让我们查看Normalize.css的代码，并了解它如何运作。

// www.javascriptcn.com code example
    /*适用于Normalize.css.2019年10月15日*/
    /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
    /*确保所有元素的盒子模型均正确地应用。html5显示为显示为块级*/
    html {line-height: 1.15; -webkit-text-size-adjust: 100%;}
    /*移除Firefox上的最大宽度限制，在Safari上的滚动空间也是如此*/
    body {margin: 0;}
    #main {display: block;}
    /*删除浏览器渲染的角度默认样式*/
    main {display: block;}
    /*设置默认的overflow为visible（hidden在IE是应用了Scroll第一次出现时），以确保个别元素具有被滚动的直觉行为*/
    h1 {font-size: 2em; margin: 0.67em 0;}
    /*在区块中添加可用的空间*/
    hr {box-sizing: content-box; height: 0; overflow: visible;}
    pre {font-family: monospace, monospace; font-size: 1em;}
    /*将默认的输入类型的外观更改为表单元素的常规外观*/
    a {background-color: transparent; -webkit-text-decoration-skip: objects;}
    /*删除在Apple设备上的背景中的边框和内边距*/
    b, strong {font-weight: bolder;}
    code, kbd, samp {font-family: monospace, monospace; font-size: 1em;}
    / *在用户输入时去除部分元素默认的间隙*/
    input {font: inherit;margin: 0;}
    /*包括select元素与其他同级元素*/
    optgroup {font-weight: bold;}
    /*reset上用户台的缩放系数*/
    table {border-collapse: collapse;border-spacing: 0;}
    /*删除表格的vertical-align的中间与bottom默认属性*/
    td, th {padding: 0;}
    /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

需要注意的是，Normalize.css并不是任何方面的“ 零样式”。

如果您查看现代的Web UI库（如Twitter的Bootstrap或Foundation），则不难发现它们都是使用Normalize.css作为其内部样式表。您会发现，Normalize.css大量保留了各种浏览器的默认样式，同时细微地调整了很多元素的样式，以使它们的单个特性在所有浏览器上取得良好的效果。

使用Normalize.css的好处是，它保留了浏览器默认样式的很多缺省特性。使用Normalize.css，您可以专注于自己的设计，而不必担心应用默认设置会影响自己所期望的效果。

那么，哪个更好？

这个问题好像没有简单的答案。Normalize.css和CSS Reset两种方法各有优缺点。如果您想完全控制Web页面的样式，或者您希望设计具有非常特殊或个性化的样式，则CSS重置是最明显的选择（例如，需要构建特定的应用程序样式）。这个有点像从白纸开始写一个书，每一行都是用“font-size: 16px;”来定义的样式；而Normalize.css配合我们的设计进行优化，使我们得到更好的结果，并提高Web应用程序的一致性度。

如果您选择Normalize.css，您将获得一个非常强大的样式库，它可以让您的Web应用程序在任何情况下都表现卓越。如果您选择CSS Reset，则需要向任何单独的规格定制样式的开发人员提供具体指导，并完全独立于其他类库（如Bootstrap和Foundation）。

现在，您可能正在想：“好了，我现在该怎么做？”下面是一个实现Normalize.css的示例代码：

    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.css">

这是现代开发过程中推荐的一种方式，一次性download适用各种平台，因此可以在项目中重载（快速加入），并为我们提供所有在设计期间可能需要的默认设置。

如果您想使用类似Eric Meyer的Reset CSS这样的手动方法，则可以通过这个链接获得更多样例代码：https://meyerweb.com/eric/tools/css/reset/

最后，我希望本篇文章能解答您的问题，并帮助您在样式方面更加自信。当然，在任何设计过程中，样式表的使用都是非常重要的，这也是实现一个优秀UI的绝佳机会。希望我添加的查询和样例内容对您有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d711eea941bf7134ce9b17

重置所有样式？从 Normalize.css 到 CSS Reset

接着读