normalize和css reset分别是什么文件？又有什么区别？
2021-02-18 14:09:50
Normalize.css和CSS Reset的定义
Normalize.css是一种现代CSS工具文件，旨在为HTML5提供标准化的默认样式基础，同时保留浏览器中有价值的默认样式。它并非完全重置所有元素的样式，而是通过修复浏览器差异和兼容性问题，使不同浏览器下的元素表现更一致。
CSS Reset则是通过为几乎所有HTML元素设置统一的默认样式（如将边距、字体、列表样式等归零），强制消除浏览器间的默认样式差异，使开发者从“零基础”开始构建样式。
两者的核心区别
样式保留策略不同
CSS Reset会覆盖所有元素的默认样式，导致开发者需重新定义公共排版元素（如标题、列表、表单）的样式。而Normalize.css保留了浏览器中合理的默认样式（如<h1>的字体加粗、<ul>的缩进），仅修复不一致的部分，减少重复代码。
浏览器兼容性处理方式不同
Normalize.css专门修复了HTML5元素（如<article>、<section>）的显示问题、预格式化文本的字体大小、IE9中SVG溢出等跨浏览器bug，其范围超出传统CSS Reset。CSS Reset通常不涉及此类细节，仅关注基础样式统一。
代码结构与调试体验不同
Normalize.css采用模块化设计，代码被拆分为独立部分（如表单、排版、HTML5元素），开发者可按需移除未使用的模块。其选择器使用谨慎，避免浏览器调试工具中出现冗长的继承链。CSS Reset则可能因全局重置导致调试工具中样式继承链冗长，增加维护难度。
文档与可维护性不同
Normalize.css的代码基于大量跨浏览器测试，每行代码均有详细注释，并在GitHub Wiki中说明设计原理、浏览器差异及测试方法。CSS Reset通常缺乏此类文档，开发者需自行理解其全局重置逻辑。
热门标签
