本文探讨了CSS Reset的作用，指出在现代浏览器中使用CSS Reset的利弊，并提供了一个更新的CSS Reset模板。模板包括：1. 设置全局box-sizing为border-box，2. 取消默认margin，3. 允许百分比高度，4. 调整行高，5. 优化文本渲染，6. 多媒体默认展示方式改进，7. 避免文字风格问题，8. 强制换行处理，9. 解决层叠问题。建议根据项目需求定制CSS Reset。
什么是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模板
之前一直有一个
最低0.47元/天 解锁文章
2728
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
