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/