通常，我们希望HTML元素看起来相同，与使用哪个浏览器进行查看无关。不幸的是，由于浏览器的运行方式，情况并非如此。
在消除用户代理样式之间的差异时使用哪种方法的问题是标准化CSS与CSS重置之间的持续争论。
在我们深入了解我的推荐工作方式之前，我想向那些不熟悉它们的人解释这两个术语。
CSS用户代理样式
当浏览器呈现HTML页面时，它会在您编写单个样式之前应用基本样式。例如，<h1>以<h6>HTML在所有浏览器标签从正常文本不同：在一般情况下，它们的字体大小更大，它们的字体重量为粗体（font-weight:bold），并且它们具有在顶部和底部边缘。
<h1> chrome中的默认样式
虽然所有浏览器都应用其基本样式，但每个浏览器的特定样式与其他浏览器不同，当然，这会导致不一致问题。这是我们将在这篇文章中讨论的问题。
解决浏览器不一致问题的尝试产生了两种方法：Normalize CSS方法和CSS Reset方法。简而言之，我们可以将Normalize CSS描述为一个温和的解决方案，并将Reset CSS描述为更积极的解决方案。现在让我们详细说明。
规范化CSS
规范化。css是一个小型CSS文件，它在HTML元素的默认样式中提供跨浏览器一致性。
这意味着，如果我们查看浏览器应用的样式的W3C标准，并且其中一个浏览器存在不一致，则normalize.css样式将修复具有差异的浏览器样式。
但在某些情况下，我们无法根据标准修复错误的浏览器，通常是因为IE或EDGE。在这些情况下，Normalize中的修复程序将IE或EDGE样式应用于其余浏览器。
这是一个真实的例子：Chrome，Safari和Firefox渲染<h1>标签位于<article>/ <aside>/ <nav>/ <section>标签内，其字体大小小于独立<h1>标签，并且具有不同的边距大小。这些是Chrome，Safari和Firefox中的用户代理样式，如果<h1>是<article>/ <aside>/ <nav>/ <section>标记内的标记：
:-webkit-any(article,aside,nav,section) h1 {
font-size: 1.5em;
margin-block-start: 0.83em;
margin-block-end: 0.83em;
}
在这种情况下，Internet Explorer和EDGE浏览器在它们应用的样式中占少数，理论上，定义的样式normalize.css将以IE / EDGE为目标是有意义的。但是，由于这些浏览器没有“任何”选择器，因此无法定位IE / EDGE。因此，为了规范化以重置<h1>样式以对所有浏览器起相同作用，Normalize CSS定义了所有浏览器应用的IE / EDGE样式。
例：
/*
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;}
Normalize.css是由Nicolas Gallagher创建的Github上的一个开源，不断更新的项目。
重置CSS
重置CSS采用不同的方法，并表示我们根本不需要浏览器的默认样式。无论我们需要什么样的风格，我们都会根据我们的需求在项目中定义。因此，“CSS重置”会重置浏览器用户代理随附的所有样式。
这种方法适用于上面的例子，与那些<h1>以<h6>默认样式：大多数时候我们希望无论是浏览器的默认时间font-size，也没有浏览器的默认margin。
Web上有多种类型的CSS重置。下面是一个CSS Reset的一小部分示例（来自Eric Meyer的CSS Reset）：
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, 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;
}
在CSS重置方式中，我们将所有HTML标记定义为没有填充，没有边距，没有边框，相同的字体大小和相同的对齐方式。
CSS Resets的问题在于它们很难看：它们有很多选择器链，它们会产生很多不必要的覆盖。更糟糕的是，在调试时它们是不可读的。
CSS重置 – 丑陋的CSS选择器链
但还是有我们宁愿重置喜欢的风格<h1>来<h6>，<ul>，<li>等。
如何通过标准化CSS和CSS重置来安心地工作
我的建议是使用Normalize CSS和一点CSS重置。使用它们，但聪明！
在我的项目中，我将每种方法的优点融入其中。一方面，我想要Normalize CSS的好处，而在其他情况下，我希望CSS重置的好处没有那些丑陋的CSS选择器的大链。
自己重置CSS
在我13年的经验中，我了解到您总是希望重置HTML标签。例如链接的颜色，按钮的默认样式，列表的默认值等。
除了normalize.css我使用的，我添加了一个reset.local.css我想要覆盖的所有样式。与普通的CSS重置不同，我只针对特定HTML标签的样式，而不是制作一个大的标签列表。
以下是如何进行自己的CSS重置的示例：
我的CSS重置 – reset.local.css
/****** Elad Shechter's RESET *******/
/*** box sizing border-box for all elements ***/
*,
*::before,
*::after{box-sizing:border-box;}
a{text-decoration:none; color:inherit; cursor:pointer;}
button{background-color:transparent; color:inherit; border-width:0; padding:0; cursor:pointer;}
figure{margin:0;}
input::-moz-focus-inner {border:0; padding:0; margin:0;}
ul, ol, dd{margin:0; padding:0; list-style:none;}
h1, h2, h3, h4, h5, h6{margin:0; font-size:inherit; font-weight:inherit;}
p{margin:0;}
cite {font-style:normal;}
fieldset{border-width:0; padding:0; margin:0;}
通过这种方式，CSS重置不那么具有侵略性，并且在您查看它的各个方面都更具可读性。
基本排版
除了normalize.css和local.reset.css我有我的所有项目中，我添加其他文件进行基本的排版。这个文件是不是任一部分归CSS或CSS重置，这是一个基本的样式表与该网站的排版，包含类似的属性direction，font-family，font-size，line-height，字体颜色。
typography.css
html{
font-size: 1px;/*for using REM units*/
}
body{
direction: ltr;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
font-size: 16rem;
font-weight: 400;
line-height: 1.3;
color: #222;
}
把它放在一起
利用SASS预处理器的优势，我有一个_reset.scss包含所有这些部分的文件：
- Normalize.css – 来自GitHub的CSS Normalize的最新版本。
- 我自己的CSS重置
- 基本排版文件
示例（_resets.scss文件）：
@import“resets / normalize.scss”;
@import“resets / reset.local.scss”;
@import“resets / typography.scss”;
首页
点击拨打 18150366706(微信同号)