HTML標籤樣式初始化

咩也都唔識發表於2018-07-01

為什麼要初始化?

基本原因就是,瀏覽器會給一些元素新增一些css屬性的初始值,但是這些屬性值可能會影響到我們的專案開發,造成佈局與理想佈局不一致的情況。

解決方案?

大多數人的解決方案都是百度一些大公司樣式表初始化,但是這不是最佳方法,因為就算是大公司的樣式初始化也有一些冗餘。冗餘,就會導致我們瀏覽器多花一些資源去處理沒必要的問題。所以樣式表初始化也是一個很重要的技術。

今天我在chorme瀏覽器下,針對marginpadding的初始值進行了一些整理。(樣式初始化當然不是僅僅設定邊距,如果有興趣的小夥伴可以繼續去整理其他屬性的初始值)


我將邊距初始化分為三種情況:

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


以上就是我今天測試整理出來的屬性,除了以上標籤,如果大家還發現有其他的標籤是我沒有列出來的,歡迎大家留言或者私信我,我一定虛心求教


再來看看一個網上的樣式表初始化例子

騰訊官網樣式初始化

HTML標籤樣式初始化

對比發現,除了input,textarea,select,button之外,其他標籤是沒必要同時初始化margin+padding,當然它這樣寫可能是出於其它目的,在這裡我就不猜測它的目的了。

除了margin和padding的初始化外,還有很多初始化值,很興趣的小夥伴可以自行去嘗試,在這裡我就不一一列舉了。

謝謝大家觀看!