HTML5学堂 - 码匠：为防止不同浏览器默认样式对于网页布局样式造成的影响，通常我们在HTML文件的头部引入上面这段重置代码，将一些浏览器所不同的样式以及部分标签的默认样式清除掉，具体代码如下。

示例代码

CSS reset重置原理解析 | 码匠

标签未清除浏览器默认样式

CSS reset重置原理解析 | 码匠

标签清除浏览器默认样式

CSS reset重置原理解析 | 码匠

为何要引入CSS重置文件

在HTML标签在浏览器里有默认的样式，例如 html，body标签有上下边距。不同浏览器的默认样式之间也会有差别。在制作页面的时候，浏览器的默认样式往往会给我们带来麻烦，影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉，更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。

CSS重置文件代码

@charset 'utf-8';

/* CSS reset */

html{color:#000;background:#FFF;font-family:Arial,'Microsoft YaHei','宋体';}

/*清除默认的内边距和外边距等*/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td,strong{padding:0;margin:0;font-family:'Microsoft YaHei',Arial,'宋体';}

table{border-collapse:collapse;border-spacing:0;}

/*清除默认边框*/

fieldset,img{border:0;}

a{text-decoration:none; color:#00c; outline:none;}/*此处待添加默认链接颜色*/

var,em,strong{font-style:normal;}

address,caption,cite,code,dfn,em,strong,th,var, optgroup{font-style:inherit;font-weight:inherit;}

del,ins{text-decoration:none;}

li{list-style:none;}

caption,th{text-align:left;}

/*清除默认的字体大小和文字粗细*/

h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}

q:before,q:after{content:'';}

abbr,acronym{border:0;font-variant:normal;}

sup{vertical-align:baseline;}

sub{vertical-align:baseline;}

legend{color:#000;}

input,button,textarea,select,optgroup,option{font-family:inherit; font-size:inherit;font-style:inherit;font-weight:inherit;}

input,button,textarea,select{*font-size:100%;}

body{-webkit-user-select:none;-webkit-text-size-adjust:none;}

/*去除移动端点击事件出现的背景框*/

*{-webkit-tap-highlight-color:rgba(0,0,0,0);}

/*清除浮动*/

.clearfix:after {content:"\200B"; display:block; height:0; clear:both; }

/*清除浮动的兼容IE*/

.clearfix { *zoom:1; }

代码下载地址：
https://css.h5course.cn/reset-1.0.0.css

网站推荐：http://weixin.mj216.com/

HTML5学堂（码匠） - https://weixin.mj216.com/