這次帶給大家詳談css樣式初始化 ，css的樣式初始化注意事項有哪些，下面就是實戰案例，一起來看一下。
在網站寫的時候，由於許多的標籤會有預設存在的樣式，像是P標籤的外邊距，a標籤的下劃線等等，通常我們會把這些預設樣式去除，以免在後面的編寫中造成諸多的不變。
1、擁有預設內外邊距的標籤
有些人會圖省事，清除內外邊距直接用*{margin:0;padding:0;}，這樣子寫，在專案很小的時候，你會感覺沒什麼，一旦專案大了以後，再這麼寫將會及其消耗網站的加性能，降低網站加載速度。
所以我們要了解哪些標籤預設會擁有內外邊距，然後再依照使用情況進行樣式初始化：
-------------- -------------------------------------------------- ----------------------------------常用的標籤------------- -------------------------------------------------- -------------------------------------------------- ------------
body標籤：預設margin:8px;
##dl標籤，p標籤：預設margin-top:1em;margin-bottom:1em;
dd標籤：預設margin-left:40px;
ul、ol標籤：預設margin-top:1em;margin-bottom:1em;padding-left:40px;
h1標籤~h6標籤：預設margin-top:0.67em;margin-bottom:0.67em;
form標籤：預設margin-top:0em;
#fieldset標籤：預設margin-left:2px;margin-right:2px;padding :0.35em 0.75em 0.625em;
input標籤：預設padding:1px 0px;
textarea標籤：預設padding:2px ;
button標籤：預設padding:1px 6px;
hr標籤：預設margin-top:0.5em;margin-bottom:0.5em;\
#pre標籤：預設margin:1em 0px 1em;
#
2、網站的字體樣式body,dl,dd,ul,ol,p,h1,h2,h3,h4,h5,h6,form,input,textarea,button{
margin:0;
padding:0;
}
<!--以上标签为最常用的，其余若需要则再额外添加-->登入後複製
# 一般我們會在body標籤內書寫網站的整體字體樣式，然後局部位置文字樣式需要修改的在單獨進行修改
3、去掉table標籤邊距，讓其合併在一起body,button,input,textarea,select{
font:12px/1.5 'Microsoft YaHei','arial','tahoma';
color:#666;
}
<!--
一般设置字体大小12px，字体行高为1.5倍行距，字体样式为‘微软雅黑’或者‘宋体’
字体颜色由网站风格决定
-->登入後複製
4、消除字型風格table {
border-collapse:collapse;
border-spacing:0;
}
<!--
默认:border-collapse:separate;//设置单元格边框是否合并
border-spacing:2px;//相邻单元格边框间的距离
-->登入後複製
5、消除清單標籤前的識別碼i,em{
font-style:normal;
}
<!--
默认是斜体（italic）
-->
b,strong{
font-weight:normal;
}
<!--
默认是粗体（bold）
-->登入後複製
6、消除a標籤的底線、統一字體樣式ul,ol{
list-style:none;
}
<!--
默认是：initial(默认值)
-->登入後複製
a{
text-decoration:none;
color:inherit;
}
<!--
text-decoration:默认是underline(下划线)
color:默认是-webkit-link;颜色值为#00e;
-->7、清除Img標籤的邊框和垂直對齊方式
img{
border:none;
verticla-align:middle;
}
<!--
border:ie默认有边框
verticla-align:默认是baseline（基线）
-->說明：以上這些都是最常用到的，其他標籤的樣式初始化視情況再繼續增加。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
jest測試react native元件的步奏是什麼
以上是詳談css樣式初始化的詳細內容。更多資訊請關注PHP中文網其他相關文章！
