什么是CSS Reset

html-css011

什么是CSS Reset,第1张

在HTML标签在浏览器里有默认的样式，例如 p 标签有上下边距，strong标签有字体加粗样式，em标签有字体倾斜样式。不同浏览器的默认样式之间也会有差别，例如ul默认带有缩进的样式，在IE下，它的缩进是通过margin实现的，而Firefox下，它的缩进是由padding实现的。在切换页面的时候，浏览器的默认样式往往会给我们带来麻烦，影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉，更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。最最简单的说法就是把浏览器提供的默认样式覆盖掉！这就是CSS reset。

举例：

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,

form,fieldset,input,textarea,p,blockquote,th,td {

padding: 0

margin: 0

}

table {

border-collapse: collapse

border-spacing: 0

}

fieldset,img {

border: 0

}

address,caption,cite,code,dfn,em,strong,th,var {

font-weight: normal

font-style: normal

}

ol,ul {

list-style: none

}

caption,th {

text-align: left

}

h1,h2,h3,h4,h5,h6 {

font-weight: normal

font-size: 100%

}

q:before,q:after {

content:''

}

abbr,acronym { border: 0

}

每个浏览器都有一些自带的或者共有的默认样式，会造成一些布局上的困扰，css reset的作用就是重置这些默认样式，使样式表现一致，比如 *{margin:0padding:0}就是一个最简单的css reset