使用*{padding:0;}遇到的坑

像很多人一樣,初學者我喜歡在css的最開頭用*{padding:0;},在做信用卡通知系統界面時我被這個坑了兩次,在此mark。

一、table的cellpadding設置無效

       在寫一個table時,發現cellpadding設置無效,查找原因後是因爲*{padding:0;}導致的。

       解決方法有兩種:

        1.使用td的padding來達到同樣的效果。在css中優先級高的樣式會覆蓋優先級低的樣式,所以我們可以通過給td重新賦予padding值來替代掉cellpadding。

        2.不使用通配符,需要對哪些屬性reset就單獨拿出來。

        demo戳這裏:http://runjs.cn/code/dufph55a

二、列表樣式丟失

       在寫左側菜單導航欄時,我使用了li元素嵌套ul,結果發現並沒有層級樣式。

      去除*{paddin:0;}後:

          這是因爲列表的層級樣式其實是li元素默認的padding形成的,如果我們將它的padding設置爲0後,樣式自然就丟失了。

          解決方法:

          1.重新給li元素的padding賦值

          2.不使用通配符,需要對哪些屬性reset就單獨拿出來。 

          demo戳這裏:http://runjs.cn/code/9lejphkd

         *{padding:0;}還是要慎用,它會破壞掉很多元素的默認樣式,除了我上面寫的兩種,它對button也是有影響的,建議將需要reset的屬性羅列出來reset。

        另外關於通配符設置樣式是否對性能有影響,這個大家也是公說公有理,婆說婆有理,期待哪位用具體數據說話,附一個討論連接:http://bbs.blueidea.com/thread-2838310-1-1.html

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章