reset.css（resetcss的作用）

本文目录一览：

• 1、css外部样式的reset.css是干嘛的？
• 2、如何让某一元素内的内容不被reset.css重置
• 3、到底该不该用 CSS reset

css外部样式的reset.css是干嘛的？

Reset是重置的意思。

现在的浏览器五花八门，光ie就有好多版本，还有火狐，Chrome等等。每个浏览器的默认样式也是不同的。所以就要考虑一个兼容问题。比如你用ie打开网站正常，但是用火狐或其他浏览器打开的时候，网站就变形了。这些都属于兼容问题。

为了避免这种问题，我们需要把一些常用的html标签重置(CSS Reset)，将它们统一定义，就可以产生相同的显示效果。比如：

html, body, div, span,object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, abbr,del, dfn, em, img, ins,strike, strong, dl, dt, dd, ol, ul, li,fieldset, form, label, legend, object, col, colgroup, caption, summary, tbody, tfoot, thead, th{margin:0; padding:0; border:0;}

这个方法让所有的选择器的padding、margin和border都设置成0。

当然。reset.css只是一个名字，方便阅读，标准一些而已。你可以自己随意命名。

详细信息可以阅读

如何让某一元素内的内容不被reset.css重置

css是后设置的会覆盖前面设置的；

比如在样式重置里规范li

li{list-style:none;}//取消li前面的原点，

在style.css里在定义一次li就取消了样式重置

li{list-style:circle;}

到底该不该用 CSS reset

最初出现 CSS reset 的目的是解决浏览器在默认样式上的诸多差异和问题。而现代浏览器在这方面的差异已经小了很多，所以 CSS reset 的必要性就不那么高了。

另一方面，滥用 CSS reset 导致一些问题：

1.

不当的破坏了所有浏览器的基本样式。最典型的混蛋做法就是将所有元素的margin/padding设为0，及去掉ol/ul的列表样式，去掉h1~h6

的字体大小样式。这导致blockquote、ol、ul、hn等语义元素在没有赋以其他合理的样式时（常常如此），缺乏恰当的样式展现。而因为视觉上无

法区分，这进一步导致许多开发人员忽视或误用这些语义元素，并严重破坏团队内其他希望使用语义元素的开发人员的工作流程。

2.

浏览器为配合控件风格，或出于可用性和无障碍性考虑，会有一些特定的默认样式。如一些浏览器对于 input[type=radio] 默认有

margin，以确保单选框的外观比较协调。粗暴的reset导致控件外观可能在特定浏览器下失调。又如大部分交互控件在获得焦点时有虚线

outline。去掉这样式而又不提供其他对于焦点的视觉反馈机制（常常如此）可能导致可用性和无障碍性问题。

3. 某些use case中，网页中有有一些较高独立性的部分，比如内嵌编辑器、widget、第三方内容等，CSS reset导致这部分的样式常需要完全重新覆写，而这种覆写本来可能大部分是不必要的，令人烦躁且可能遗漏。参考此问答：怎样不让 CSS reset 样式覆盖掉编辑器内的文章样式？

4.

CSS reset

通常会增加浏览器进行样式计算的成本（即有一定的性能负担），因为它引入了许多的针对元素的全局规则，网页中几乎所有元素都会匹配一条乃至几条的

reset规则，且往往规则中的属性设定其实会被更specific的规则所覆盖（比如padding和margin）。极端情况下，可能某条reset

规则中的所有属性设置实际上并没有在任何元素上生效（因为全部被更specific的规则给覆盖了），所有针对此规则的级联计算全都是浪费。

注意一点，导致这些问题共通的本质性因素是：CSS reset 的作用是全局性的（即缺乏选择器限定范围）。所有合格的程序员都知道避免滥用全局变量，但是在 CSS 上他们就忘记了这一点。

因此，除了上述4点所提到的问题，从可维护性上来看，所有全局变量可能导致的维护性噩梦也会以类似的方式发生在 CSS reset 上。比如一旦引入了 CSS reset，当项目规模大到一定程度，要再想把 CSS reset 从项目中去掉，就十分困难。

解决方法：

1. 不使用 CSS reset，或使用那些谨慎的，只是用来消除浏览器默认样式不一致的真正的 CSS reset（更准确的称谓或许是 CSS normalize，参考此问答：Normalize.css 与传统的 CSS Reset 有哪些区别？）。

2. 对于特定的reset需求，只在真正需要的时候，单独设置。若要提高代码复用程度，可以引入CSS预处理，以mixin来做。例子：

@mixin reset-box() {

list-style: none

padding: 0

margin: 0

}

@mixin reset-font() {

font-size: 1em

font-weight: normal

font-style: normal

}

//真正用的场景

html#示例网站 {

nav#全站导航条 ul {

border: 1px solid

+reset-box()

}

section.侧栏模块 {

border: 1px solid

h1 {

background: navy

color: white

border-bottom: 1px solid

+reset-box()

+reset-font()

}

}

}

（以上以伪代码书写，请自行脑补转换为 SASS/Stylus/LESS 等。）

3. 对于已经使用 CSS reset 的同学，可以籍由支持局部 import 的 CSS 预处理器（比如 stylus）的帮助，从限定其在特定 selector 之下开始，逐步控制其影响范围。如：

html#示例网站 {

... // 不依赖 CSS reset 的部分

.legacy-part { // 页面中仍依赖 CSS reset 的部分

@import 'reset.css'

}

}

最后顺带说下，CSS 3 已加入 unset 关键字和 all 快捷属性（目前仅 Firefox 支持），可以更好的支持必要的 reset 需求。

以上。

补充：

有些同学认为“没有那种很傻叉的重置的话，我觉得都算不上是滥用”。问题在于，怎么样算是“傻叉重置”？团队里的每个人对此认识一致吗？将来新人进入老人离开，还能保持对此认识一致吗？

除

了非常明确的使用 normalize.css 之类的既定方案的情况，许多团队常见自行 customize 一个 reset.css 或混合了

reset 的 base.css。这种情况下，随着时间流逝最可能出现的情形就是此 css

会逐渐混入了更多的全局性的样式（因为合格的程序员都有增强复用性的冲动），从而陷入之前说的那些问题。因此，未雨绸缪的做法，就是一开始就避免使用

CSS reset，或严格明确和限定其作用（如 normalize 的方式）。

reset.css的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于resetcss的作用、reset.css的信息别忘了在本站进行查找喔。