什么是CSS Reset
如果你不定义html元素的默认css样式,那么浏览器自己就会用它自己的默认样式;但由于不同浏览器的默认样式是不一样的,会导致你开发的页面在不同的浏览器上会看上去不太一样;所以,为了避免页面在不同的浏览器上有不同的效果,我们通常需要显示地对html元素的css样式进行一些默认设置,来将“浏览器自带的设置”重置掉,这个就叫做CSS Reset
在一开始,CSS的工作方式没有完全标准化,所以每个浏览器(IE,Chrome,Firefox,Safari)都实现了它认为正确的东西。
各个浏览器将自认为合适的“边框”,“填充”,“边距”,“字体”,“行高”等样式加载到一些基础元素(input,div,a,span)中,以赋予页面独特的感觉。
如下图,可以看到,很基础的html元素在IE,Chrome,Firefox,Opera中的显示不尽相同。
所以,为了避免页面在不同的浏览器上有不同的效果,我们通常需要显示地对html元素的css样式进行一些默认设置,来将“浏览器自带的设置”重置掉,这个就叫做CSS Reset。
使用CSS Reset的弊端
其实也有很多“不建议使用CSS Reset”的声音,主要有以下几个原因
- 所有的html元素都需要重新设置,会增加css文件的大小
- 如果重置掉一些基础属性,开发时会容易忘掉补充这些属性,反而引入显示混乱的问题
- 重置掉一些属性会影响用户通过键盘快捷键操作
辩证的判断是否需要CSS Reset
从历史上看,CSS Reset的主要目标是确保浏览器之间的一致性,并撤消所有默认样式,创建一个空白板。
但是如今浏览器在布局或间距方面并没有太大的差异。总的来说,浏览器忠实地实现了CSS规范,并且一切都如你所愿,所以不再那么需要了。
总之,我们应该根据实际的需求辩证的判断是否需要CSS Reset,保持简洁,保持高效即可。
下面列出一个比较合适的CSS Reset模板,不会完全重置浏览器的默认样式而带来不便,同时能够避免一些常见的浏览器兼容性的问题。
一个合适的CSS Reset模板
之前一直有一个