关于 CSS Reset

相信对 CSS 使用有一定经验的童鞋应该都听过 CSS reset 这个概念，想腾讯等大型网站的 CSS 文件中也必定要一段 reset ，那么 CSS reset 究竟是什么呢？

 

CSS reset 不是一种技术，而且一段 CSS ，正如它的名字那样，重置样式。 HTML 标签在浏览器里是有默认的样式，例如 a 标签会有下划线，p 标签会有上下边距，而且这些标签的默认样式在不同的浏览器中可能是不同的，比如 ui 标签默认会有缩进， IE 是利用 margin 实现的，而 Firefox 和 chrome 是利用 padding 实现的。因此在前端开发的过程中这种不统一的默认样式会给开发者带来很多麻烦，因此需要写一段 CSS reset 的样式覆盖了原本不统一的默认样式。

 

CSS reset 可以根据自身的情况自定义，只要能实现统一样式的效果就行了，写出一段完整、高效的 CSS 后就可以应用于自己开发的所有项目了，下面分享一下：

 

1 2 3 4 5 6 7 8 9

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-size: 100%; vertical-align: baseline; background: transparent; } body{line-height: 1; text-align: left; } ol,ul{list-style: none; } blockquote,q{quotes: none; } blockquote: before,blockquote: after,q: before,q: after{content: ''; content: none; } : focus {outline: 0; } ins{text-decoration: none; } del{text-decoration: line-through; } table{border-collapse: collapse; border-spacing: 0; }

 

在这段 CSS reset 里，对各种容器，表格等标签设定 padding 和 margin 为 0， font-size 为 100% ，这些都是为了统一样式，这个也是 CSS reset 的核心。