根本原因是浏览器user agent stylesheet无处不在且隐含结构，如body默认margin、h1大字号边距；正确做法是用normalize.css分层重置，而非粗暴*{margin:0;padding:0}，并针对性处理表单控件和-webkit-autofill。
CSS样式被浏览器默认样式覆盖，根本原因不是你写错了，而是浏览器自带的 user agent stylesheet 优先级比你预期的高——尤其在没重置的情况下，body 默认有 margin，h1 有巨大字号和上下边距，ul 默认带圆点和缩进。
浏览器默认样式到底有多强
它不是“低优先级”，而是“无处不在+结构隐含”。比如：
-
button元素默认有border、padding、font，哪怕你只写了.my-btn { background: blue; }，其余样式仍由浏览器兜底 -
input[type="number"]在 Chrome 中会渲染出上下微调按钮（::-webkit-inner-spin-button），它自带样式不继承你的appearance: none，除非你显式覆盖 -
em、strong等语义标签自带font-style或font-weight，若你只设了color，其他表现仍走默认逻辑
Reset 不是删掉所有样式，而是统一初始状态
直接用 * { margin: 0; padding: 0; } 是错的：它重置了所有元素，但破坏了语义化默认行为（如 fieldset 的边框、details 的折叠逻辑），且无法处理伪元素和表单控件。
推荐做法是分层控制：
- 用
Normalize.css（轻量、保留有用默认、修复跨浏览器差异），而不是旧式reset.css - 对关键表单元素单独处理：
input, select, textarea { appearance: none; }+ 手动补border和padding - 针对 WebKit 自动填充，必须加：
input:-webkit-autofill { -webkit-text-fill-color: #333; -webkit-box-shadow: 0 0 0 1000px #fff inset; }
为什么 reset 后还看到“奇怪边距”
常见漏点：
-
html和body的height: 100%没配齐，导致子元素height: 100%失效 -
box-sizing只设了div，但忘了input、textarea—— 它们默认是content-box，padding会撑大宽度 -
font-size在rem基准里没统一重设，1rem在不同浏览器下可能对应 16px 或 15.6px - 用了
display: flex的容器，但子项没设flex-shrink: 0，内容溢出时被压缩，误以为是 margin 干扰
真正起作用的 reset 很短，但每行都得精准命中。别指望一次引入就一劳永逸，要结合 DevTools 的 Computed 面板，盯着 margin、padding、box-sizing 这几项看原始来源——那里才是默认样式藏身之处。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
