像很多人一样,初学者我喜欢在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