深入了解reset.css：你所不知的细节与技巧

时间：11-07 神话故事提交错误

大家好，感谢邀请，今天来为大家分享一下深入了解reset.css：你所不知的细节与技巧的问题，以及和的一些困惑，大家要是还不太明白的话，也没有关系，因为接下来将为大家分享，希望可以帮助到大家，解决大家的问题，下面就开始吧！

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {

边距： 0;

填充： 0；

}

桌子{

border-collapse: 折叠；

边框间距： 0;

}

字段集，img {

边框： 0;

}

地址、标题、引用、代码、dfn、em、strong、th、var {

字体样式：正常；

字体粗细：正常；

}

ol, ul {

列表样式：无；

}

标题，th {

文本对齐：左；

}

h1、h2、h3、h4、h5、h6 {

字体大小： 100%；

字体粗细：正常；

}

q: 之前，q: 之后{

内容："";

}

缩写词、缩写词{

边框： 0;

}首先我们要知道CSS RESET的目的是什么？是为了消除不同浏览器在默认样式中的不同行为，但今天，现代浏览器在这方面的差异已经变得小了很多。

reset.css 存在的问题

看第一段：

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {

边距： 0;

填充： 0；

}此样式的目的是清除元素的默认边距和填充。

但这段代码充满了问题。

div、dt、li、th、td 等标签没有默认的padding 和margin。如果我现在问你fieldset标签是什么，可能很少有人知道。类似的标签（例如块引用和首字母缩略词）是非常不常见的标签。它基本上不会出现在html代码中。事实上，不需要RESET。它只会给每个项目添加多余的代码；上面的意思就是这段代码实际上做了很多无用的工作！

要知道，CSS RESET 的范围是全局的。我们都知道我们应该尽量避免在脚本代码中滥用全局变量，但是当涉及到CSS 时我们总是忘记这一点。大量的全局变量会让项目变大之后维护起来非常困难。

再看一下这段：

h1、h2、h3、h4、h5、h6 {

字体大小： 100%；

字体粗细：正常；

}

ol, ul {

列表样式：无；

}这段代码的目的是为了统一h1~h6的表现，取消标题的粗体显示，取消列表元素的item点。

看似没有问题，但是h1~h6、ol、ul等具有特定语义的元素，一旦去掉自己的特性，并没有被赋予自己语义应有的样式（往往没有），导致问题越来越多。很多人都搞不清楚它们的语义。另一方面，这也是为什么越来越多的页面充斥着div而缺乏语义标签的重要原因。

YUI 版本的重置是一种一刀切的方法，无论身高或体重如何。看似将所有元素统一在同一个起跑线上，但实际上却增加了很多冗余代码，得不偿失。

因此，YUI的reset.css的许多问题导致了另一个版本的reset.css的创建，名为Normalize.css。

Normalize.css

Normalize.css 有详细注释。由于太长，您可以点击网址看一下。本文不贴出全部代码。

Normalize.css 与reset.css 的样式完全相反。它并不适用一刀切，而是专注于一种通用的解决方案，重置重置样式（例如正文的默认边距）并保留用户代理。样式和一些错误修复，这是重置所缺乏的。

Normalize.css 做了什么

统一了一些元素在所有浏览器中的行为，保护有用的浏览器默认样式而不是完全清除它们，以便它们在浏览器中表现一致；为大多数元素提供通用行为；修复了一些浏览器错误并使其在所有浏览器中保持一致；通过一些巧妙的细节改进了CSS 的可用性；提供详细的文档，让开发者了解不同元素在不同浏览器下的渲染规则；我真诚地建议您花时间阅读Normalize.css的源代码，其中总共有460行注释，以了解更多关于每个浏览器历史遗留下来的一些陷阱。