为什么要初始化css样式：统一浏览器基线

为什么要初始化css样式，核心是抹平各大浏览器自带的用户代理样式差异，把所有HTML元素统一到固定基线，避免Chrome、Safari、Edge、Firefox出现布局错位、间距不一致的问题，同时简化后续布局开发，减少额外覆盖默认样式的代码；仅静态文字展示、无自定义布局的极简网页可以不做初始化，复杂页面与多端适配项目必须执行初始化操作。

消除浏览器默认样式偏差

每一款浏览器都内置独立的基础样式表，也就是用户代理样式，同一种标签在不同浏览器里自带的外边距、内边距、字号会出现数值差别。h1标题在部分浏览器默认上下外边距为21px，在旧版IE里仅为14.25pt，没有初始化时，同样代码会出现明显排版偏差。

初始化代码会统一把margin、padding重置为0，统一盒模型为border-box，让所有浏览器从完全一致的起点渲染页面，大幅降低跨浏览器兼容调试的工作量。

规避布局意外偏移

浏览器自带默认间距会干扰自定义布局，你没有设置间距，页面却莫名多出空白，大多是默认样式造成的。

初始化可以清空这类自带间距，所有留白都由你手动编写样式控制，布局逻辑更容易把控，不会出现意料之外的留白与挤压问题。

简化CSS代码层级

没有初始化时，你需要额外编写大量样式去覆盖浏览器默认值，代码冗余度会明显上升。

提前初始化完成基线统一，后续只需要书写业务样式，不需要反复处理浏览器自带的基础属性，样式代码更简洁，维护成本更低。

两种初始化方案对比

明确适用边界

纯文字展示、只使用基础p标签与文字标签、不做盒子布局的简单静态页面，不需要初始化css样式，浏览器自带排版可以直接使用。

只要页面包含卡片、列表、表单、弹性布局等自定义排版内容，就必须优先执行样式初始化，否则大概率出现跨浏览器排版错乱。