為什麼要初始化?
基本原因就是,瀏覽器會給一些元素新增一些css屬性的初始值,但是這些屬性值可能會影響到我們的專案開發,造成佈局與理想佈局不一致的情況。
解決方案?
大多數人的解決方案都是百度一些大公司樣式表初始化,但是這不是最佳方法,因為就算是大公司的樣式初始化也有一些冗餘。冗餘,就會導致我們瀏覽器多花一些資源去處理沒必要的問題。所以樣式表初始化也是一個很重要的技術。
今天我在chorme瀏覽器下,針對margin和padding的初始值進行了一些整理。(樣式初始化當然不是僅僅設定邊距,如果有興趣的小夥伴可以繼續去整理其他屬性的初始值)
我將邊距初始化分為三種情況:
1.只具有margin初始值標籤
body,div,h1~h,p,dl,blockquote,pre初始值:
margin-*
dd初始值:
margin-left
form初始值:
margin-top
2.只具有padding初始值的標籤
legend初始值:
padding-left,padding-right
3.同時具有margin+padding初始值的標籤
input,textarea,select,button初始值:
padding-*,margin-*
fieldset初始值:
margin-left,margin-right,padding-*
ul,ol初始值(li標籤不用初始化):
margin-*,padding-left
以上就是我今天測試整理出來的屬性,除了以上標籤,如果大家還發現有其他的標籤是我沒有列出來的,歡迎大家留言或者私信我,我一定虛心求教
再來看看一個網上的樣式表初始化例子
騰訊官網樣式初始化
對比發現,除了input,textarea,select,button之外,其他標籤是沒必要同時初始化margin+padding,當然它這樣寫可能是出於其它目的,在這裡我就不猜測它的目的了。
除了margin和padding的初始化外,還有很多初始化值,很興趣的小夥伴可以自行去嘗試,在這裡我就不一一列舉了。
謝謝大家觀看!