cssreset样式的简单介绍

reset样式（cssreset），解决浏览器默认样式(user agent style sheet)带来的问题

发现自己在scoped样式里面自己反复修改样式，就是不起作用（*** 例如用个el-input组件，size="large",可是里面的字体还是小的可怜。 ），都快绝望之际，不得已用chrome的调试看下样式到底怎么回事，原来是input的font样式被一个叫user agent style sheet给绑架了，我设置的样式没有起到作用，虽然网上查资料，说这个user agent style sheet的优先级很低，但是为啥很低有时候也能找到空子逆袭，把组件样式给悄无声息的偷掉呢？没想明白。咨询了google同志，原来大家为了防止这种情况，大家都用了 CSSReset *, 听起来好专业，其实就是等于自己先交了张白卷，告诉浏览器你能想到的我已经想到了，别在为我着想了. 更简单的说，就是把这个reset.css的样式表作为样式之一先导入就好了。贴出我找的一个,其实我也不太懂原理，只知道这么用就好了。：

相关问答

Q1: css初始化风格问题

楼主，你不是不懂css，而是不懂html。

h1,h2,h3,h4,h5,h6 { margin: 0; padding: 0; font-size: 12px; }

h1到h6是html六种标题标签，在word里也有不同大小的标题预设值，他们分别有字体大小不同，边距不同、行高不同，也就是默认css属性font-size、margin-top、margin-bottom、line-height的值不同。

ul、ol是列表标签，如果不用css修饰，ul里每一项是以符号开始，ol是以数字开始

li是列表项标签。

dl、dt、dd这套和ul、ol差不多，但这一套把列表项可以分成dt和dd两种，但没有开始符号或数字。

你写的这几个css都是为了统一html的标签样式以便操作。

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, address, code, em, img, strong, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, tbody, tr, th, td {

margin: 0;

padding: 0;

border: 0;

outline: 0;

}

意思是页面中的所有html标签、body标签、div标签、span标签.......tr标签、th标签、td标签的填充、边距、边框、外边线都为0，其中outline是ie不支持，在ff下是外边线，比如用它可以改变元素聚焦时候的虚线样式。

cssReset几乎每个网站都有，打开一个页面就可以看，至于注释，我认为绝对没人给这东西标注释，因为这是简单的不能再简单的css了，都已经接近白话文了，只有复杂的css框架才会有相关的api或者注释。

Q2: Normalize.css 与传统的 CSS Reset 有哪些区别

最主要的区别是Normalize.css保留不同浏览器同标签相同的默认值，只重置不同默认样式的差异，可以说css reset的高级版。

相对于普通的css reset，Normalize的的浏览器的兼容性更好，毕竟是专业人士经过不同版本浏览器测试打造的css文件，看看它的兼容性就知道多强悍：

支持的浏览器：

Google Chrome (latest)

Mozilla Firefox (latest)

Mozilla Firefox ESR

Opera (latest)

Apple Safari 6+

Internet Explorer 8+

Q3: A标签用重置吗？padding:0 margin:0 郭老师？

css初始化是必须的。一般a标签都会初始化重置为a{text-decoration:none;}把超链接的横线样式去掉。还有一个a标签是内联元素，设置padding跟margin对a标签不起作用。

Q4: 什么是CSS Reset

就是重置css样式，也可以说是初始化css样式。

因为浏览器的品种很多，每个浏览器的默认样式也是不同的，比如button标签，在IE浏览器、Firefox浏览器以及Safari浏览器中的样式都是不同的，所以，通过重置button标签的CSS属性，然后再将它统一定义，就可以产生相同的显示效果。

如

*

{

padding:

0;

margin:

0;

border:

0;

}这也算是一个css

reset只是效率低不推荐!