像很多人一樣,初學者我喜歡在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