詳談css樣式初始化

這次給大家帶來詳談css樣式初始化 ，css的樣式初始化注意事項有哪些，下面就是實戰案例，一起來看一下。

在網站編寫的時候，由於許多的標籤會有預設存在的樣式，比如P標籤的外邊距，a標籤的底線等等，通常我們會把這些預設樣式去除，以免在後面的編寫中造成諸多的不變。

1、擁有預設內外邊距的標籤

有些人會圖省事，清除內外邊距直接用*{margin:0;padding:0;}，這樣子寫，在項目很小的時候，你會感覺沒什麼，一旦項目大了以後，再這麼寫將會及其消耗網站的加效能，降低網站載入速度。

所以我們要瞭解哪些標籤預設會擁有內外邊距，再根據使用方式進行樣式初始化：

--------------------------------------------------------------------------------------------------常用的標籤-----------------------------------------------------------------------------------------------------------------------------

1. body標籤：預設margin:8px;

2. dl標籤，p標籤：預設margin-top:1em;margin-bottom:1em;

3. dd標籤：預設margin-left:40px;

4. ul、ol標籤：預設margin-top:1em;margin-bottom:1em;padding-left:40px;

5. h1標籤~h6標籤：預設margin-top:0.67em;margin-bottom:0.67em;

6. form標籤：預設margin-top:0em;

7. fieldset標籤：預設margin-left:2px;margin-right:2px;padding:0.35em 0.75em 0.625em;

8. legend標籤：預設padding-left:2px;padding-right:2px;

9. input標籤：預設padding:1px 0px;

10. textarea標籤：預設padding:2px;

11. button標籤：預設padding:1px 6px;

12. hr標籤：預設margin-top:0.5em;margin-bottom:0.5em;\

13. pre標籤：預設margin:1em 0px 1em;

body,dl,dd,ul,ol,p,h1,h2,h3,h4,h5,h6,form,input,textarea,button{    margin:0;    padding:0;}<!--以上標籤為最常用的，其餘若需要則再額外添加-->

2、網站的字型樣式

一般我們會在body標籤內書寫網站的整體字型樣式，然後局部位置文字樣式需要修改的在單獨進行修改

body,button,input,textarea,select{    font:12px/1.5 'Microsoft YaHei','arial','tahoma';    color:#666;}<!--        一般設定字型大小12px，字型行高為1.5倍行距，字型樣式為‘微軟雅黑’或者‘宋體’    字型顏色由網站風格決定-->

3、去掉table標籤邊距，讓其合并在一起

table {    border-collapse:collapse;    border-spacing:0;}<!--    預設:border-collapse:separate;//設定儲存格邊框是否合并           border-spacing:2px;//相鄰儲存格邊框間的距離-->

4、消除字型風格

i,em{  font-style:normal;  }<!--    預設是斜體（italic）-->b,strong{  font-weight:normal;  }<!--    預設是粗體（bold）-->

5、消除列表標籤前的標識物

ul,ol{  list-style:none;  }<!--    預設是：initial(預設值)-->

6、消除a標籤的底線、統一字型樣式

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組件的步奏是什麼

javascript的隱式調用詳解

React組件refs該怎麼使用