HTML5學堂 -碼匠：為防止不同瀏覽器默認樣式對於網頁布局樣式造成的影響，通常我們在HTML文件的頭部引入上面這段重置代碼，將一些瀏覽器所不同的樣式以及部分標籤的默認樣式清除掉，具體代碼如下。

示例代碼

CSS reset重置原理解析 | 碼匠

標籤未清除瀏覽器默認樣式

CSS reset重置原理解析 | 碼匠

標籤清除瀏覽器默認樣式

CSS reset重置原理解析 | 碼匠

為何要引入CSS重置文件

在HTML標籤在瀏覽器里有默認的樣式，例如html，body標籤有上下邊距。不同瀏覽器的默認樣式之間也會有差別。在製作頁面的時候，瀏覽器的默認樣式往往會給我們帶來麻煩，影響開發效率。所以解決的方法就是一開始就將瀏覽器的默認樣式全部去掉，更準確說就是通過重新定義標籤樣式。「覆蓋」瀏覽器的CSS默認屬性。

CSS重置文件代碼

@charset 'utf-8';

html{color:#000;background:#FFF;font-family:Arial,'MicrosoftYaHei','宋體';}

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:'MicrosoftYaHei',Arial,'宋體';}

Advertisements

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; }

.clearfix { *zoom:1; }

代碼下載地址：https://css.h5course.cn/reset-1.0.0.css

網站推薦：http://weixin.mj216.com/

HTML5學堂（碼匠） - https://weixin.mj216.com/