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

CSS reset 可以将浏览器默认的样式清除掉，这样做会使我们的 CSS 或 html 标签更加方便准确。假如我们不初始化 CSS 样式属性，将会增大 CSS 代码量，所以使用初始化文件会为我们节约网页代码，节约网页下载时间；还会使得我们开发网页内容时更加方便简洁，不用考虑很多。为什么我们不建议使用通配符？

我们有的时候会使用* {padding:0;margin:0;}来清除浏览器的一些样式，这种方式很实用，*号匹配所有元素，省去了一个一个写元素名称的麻烦。但是它在性能方面是会对页面造成影响的，试想一下，你的页面非常丰富，嵌套多、元素多，这时候，*号会去每一个元素都去渲染一遍。而我们通常只需要对表格、列表、标题等标签进行初始化样式。

爱的JAVA酱们： 更多技术交流者或想获取JAVA资料请扫描二维码加微信（858568103）

击上方蓝字关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！

为了解决不同浏览器之间的一些行为差异，前端都会在代码里加一段CSSReset代码，来将所有的元素设置统一的样式，从而保证我们能在一个统一的样式下开始开发项目。

大多数人，这部分代码都不愿意手动去写，经常会用一些现有的库来处理这部分工作，如normalize.css，minireset等等。其实这里面有好多冗余的CSS代码。我一般不太喜欢这么搞。

一、加行代码

然而，如果你也是和我一样，是自己去写这部分代码的话，我建议你往里加一行代码，如下所示：

如上面代码所示，margin和padding没什么奇怪的，主要注意box-sizing我设置了border-box。

二、解释代码

对的，所有的DOM的都应该为border-box。如果有人对box-sizing不是很了解的话，那么，下面，接下来我就给大家理清一下它的用法。（之前，我的文章里有写过它的详细用法，可以参考）

它主要有两种取值：

1、content-box

当设置某个元素的宽高（width/height）时，仅仅会作用于其内容尺寸。其它，所有的padding和margin都是在其之上的累加。

比如：有个DIV设置width=80，padding=10，那么最终元素占用100（80+2*10）像素。

2、border-box

记住，padding和margin是包含在了宽高之内的。

比如，有个DIV设置width=80，padding=10，marign=10那么最终元素占用80（40+2*10+2*10）像素。

总结一下：

在重置代码里将元素设置为border-box会很方便我们进行样式布局。比如可以在父元素设置高度限制而不担心子元素的内边距或者边框来打破这种限制。

Reset 对象

在 HTML 表单中 <input type="reset"> 标签每出现一次，一个 Reset 对象就会被创建。

当重置按钮被点击，包含它的表单中所有输入元素的值都重置为它们的默认值。默认值由 HTML value 属性或 JavaScript 的 defaultValue 属性指定。

重置按钮在重置表单之前触发 onclick 句柄，并且这个句柄可以通过返回 fasle 来取消。

您可以通过遍历表单的 elements[] 数组来访问某个重置按钮，或者通过使用document.getElementById()。

Reset 对象属性

W3C: W3C 标准。

标准属性和事件

Reset 对象同样支持标准的 属性 和 事件。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！