原文：https://juejin.cn/post/6844903918686699534

前言

reset.css文件就是一個普通的層疊樣式表文檔，就是css文件，一個網站一般會用三種css文件來設定網站的樣式。重置樣式(reset.css)(重置預設的css樣式)；公共樣式 (common.css)(一系列頁面共用共享的樣式，如：頭部底部樣式)；獨立樣式(每個頁面單獨使用的樣式，如index.css)。
在這裡具體講得就是重置樣式，其他兩種樣式就是因專案而定的沒有太多的規定設定可講。

目錄

• 為什麼要用reset.css
• 怎麼用
• reset.css內容說明
• 總結

為什麼要用reset.css

因為在不同的瀏覽器中，HTML標籤會有一些預設的屬性值，但是各個瀏覽器會渲染出各不一樣的效果，例如邊距不一致、字型顏色大小行高不一樣等等。為了防止出現這種情況，其實主要是為了減少程式碼的重複定義，提高程式碼複用率，提高開發效率，重設各個瀏覽器的預設樣式，還可以解決其引起的耦合問題。
總結就是高複用，低耦合，檔案小。

怎麼用

獨立新建一個css文件來儲存重置樣式，就是reset.css裡面只存放重置樣式，其他樣式可以根據前言分類分開存放css屬性。這裡有一個是本人蔘考了各大網站的reset.css整理寫的reset.css，文件沒有絕對標準性的，很多都是根據專案的具體需求寫，我總結的只是一些非常常用的重置樣式，可以適用大部分專案，當然最好是理解了，每次自己根據專案需求對reset.css進行編寫。

reset.css說明

@charset 'utf-8';
/*這些元素都建議重新初始化*/
body,div,dl,dt,dd,ul,ol,li,tr,td,th,
h1,h2,h3,h4,h5,h6,hr,br,img,table,
input,form,a,p,textarea{
    padding:0;
    margin:0;
    font-family:Arial,'Microsoft YaHei','宋體';
}
/*去掉列表預設排列*/
ul,ol,li{
    list-style:none;
}
/*去掉底部橫線*/
/*把a元素更改設定成塊級元素，這個根據實際情況決定要不要*/
a{
    text-decoration:none;
    display:block;
}
/*img標籤要清除border。*/
/*display設為block設定為塊級元素，預設為display:inline;
存在下邊線多出4px狀況,所以一般設為block*/
img{
    border:0;
    display:block;
}
/*清除浮動破壞帶來的塌陷問題*/
/*清除浮動的相容IE*/
.clearfloat {
	zoom: 1;
}
.clearfloat:after {
	display:block;
	clear:both;
	content:"";
	visibility:hidden;
	height:0;
}
複製程式碼
 

總結

為了更規範，為了更好的與人合作，就有了reset.css文件。這個文件最好最好在專案的開始就要先寫好。如果問這個文件是不是必須的，我可以說不是，你自己在一個樣式表內看到哪個屬性就寫哪個屬性先也行，但是寫了這個文件可以幫助你節省時間，可以讓你的程式碼更優秀。謝謝！

• 回到頂部