为什么需要 css 初始化代码
不同浏览器对标签的默认样式并不一致。比如 h1 的字号、ul 的内边距、body 的外边距，各浏览器给出的值都有差别。如果不做处理，同一份 HTML 在不同浏览器里可能呈现出不同的间距和字号。
css 初始化代码的作用，就是把这些默认差异统一掉，让开发者从一个可预期的基准开始写样式。它不是必须的，但对多浏览器兼容和团队协作有明显帮助。
初始化与重置的区别
这两个概念常被混用，实际侧重不同：
- 重置（reset）：把浏览器默认样式几乎全部清掉，如
margin、padding、font-size、list-style都归零，之后一切从头写。 - 初始化（normalize）：保留有用的默认值，只修正浏览器之间的不一致，比如统一
line-height、修正button的字体继承。
现代项目更推荐初始化思路，因为它保留了标题、列表等标签的语义化默认表现，减少重复劳动。
一份精简的初始化代码
下面这份代码覆盖了最常见的差异点，可直接放进项目的基础样式文件：
- {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
}
body {
font-family: system-ui, -apple-system, “Segoe UI”, sans-serif;
line-height: 1.5;
color: #333;
}
ul, ol {
list-style: none;
}
a {
text-decoration: none;
color: inherit;
}
img, video {
max-width: 100%;
display: block;
}
button, input, textarea, select {
font: inherit;
color: inherit;
}
table {
border-collapse: collapse;
}
这段代码做了几件事：清零默认间距、统一盒模型为 border-box、让表单元素继承字体、去掉链接下划线和列表符号、让图片自适应宽度。
使用时的几个注意点
不要盲目清零所有样式
* { margin: 0; padding: 0; } 写法简单，但会影响所有元素，包括你后续想保留间距的标签。如果项目对语义化要求高，可以按标签逐个处理。
表单元素要单独处理
button、input 在部分浏览器中不继承 body 的字体，必须显式写 font: inherit，否则会出现字体不一致的情况。
box-sizing 建议全局设置
设为 border-box 后，元素的 width 包含内边距和边框，布局计算更直观，能减少不少尺寸意外。
移动端补充设置
如果面向移动端，可以加上 -webkit-text-size-adjust: 100%，避免横竖屏切换时字号被自动放大。
写在最后
css 初始化代码没有唯一标准答案，核心目标是消除浏览器差异、建立统一基准。建议根据项目实际需求裁剪，保留真正需要的部分，而不是照搬一份几千行的重置文件。代码越少，理解和维护的成本就越低。
