重置css导致按钮样式异常、列表符号消失及默认流破坏，应避免全局清空，改用normalize.css或精简reset并显式补全button、ul/ol、段落等基础样式。
按钮样式异常：重置抹掉了原生交互细节
重置 CSS 把 button 的 margin、padding、border、background、font 全设为 0 或 inherit，但浏览器原本靠这些值维持点击区域大小、文字垂直居中、焦点轮廓可见性。结果就是按钮变矮、文字贴边、键盘 Tab 焦点看不见。
实操建议：
- 必须补
button { padding: 0.375em 0.75em; border: 1px solid currentColor; background: transparent; }（数值按设计系统微调） -
button:focus和button:active要显式定义，尤其不能漏outline—— normalize.css 不动它，reset.css 通常会清掉 - WebKit 下加
-webkit-appearance: none消除默认下拉箭头或增减按钮干扰，但要同步补cursor: pointer - 若用
type="submit"或type="reset"，注意某些 reset 会把它们的font-size归零，需在基础样式里统一继承body字号
列表符号消失且缩进错乱：list-style 和 padding 被一并清空
重置常对 ul、ol 做 list-style: none + margin: 0; padding: 0，这直接干掉了浏览器默认的圆点/数字和左侧缩进。结果是列表项挤成一竖列，无标识、无呼吸感，嵌套列表更会完全塌陷。
实操建议：
- 不要全局
list-style: none；改用ul, ol { list-style-position: outside; }保留语义，并单独控制缩进 - 显式设
ul, ol { padding-left: 2rem; }（非 0），否则嵌套时子列表无层级感 - 若需无序列表带圆点但去缩进，写
ul { list-style: disc; padding-left: 0; margin-left: 1rem; }—— 用margin-left替代padding-left控制悬挂缩进 - 检查是否误对
li::before做了重置，某些 reset 会连伪元素一起归零content，导致自定义标记失效
为什么 normalize.css 更少出这类问题？
normalize.css 不清空 button 的 border 和 background，也不碰 ul 的 padding-left，它只修正已知跨浏览器 bug（比如 IE 的 h1 margin 过大、Safari 的 input 圆角不一致）。所以按钮仍可点、列表仍有缩进——你看到的是“修过”的默认，不是“削平”的空白。
但这也意味着：它不解决你项目里自定义布局对齐的需求。如果 layout 依赖所有块级元素默认 margin-bottom: 1em，而 normalize.css 没动 p 的 margin，但你的 reset 却清了，那问题就出在混用策略上。
实操建议：
- 选一个策略到底：要么全用
normalize.css+ 手动补* { box-sizing: border-box }和img { max-width: 100% }，要么用精简 reset（如 modern-css-reset）+ 显式补表单/列表基础样式 - 绝对避免在
normalize.css后再引入一个 full reset —— 后者会覆盖前者修复的兼容性逻辑 - 构建工具中若用
@layer，确保@layer reset包住 normalize，且声明在所有@import之前
真正容易被忽略的：重置后没有重建“默认流”
重置不是终点，是起点。你清掉了 h1 的 margin-top，就得立刻决定它该有 margin-bottom: 1.5rem 还是 1.25rem；你归零了 ul 的 padding，就得马上给它加 margin-block-start 来撑开段落间距。没人替你定义“合理默认”，而浏览器原本的默认值，恰恰是多年可访问性与排版经验沉淀下来的平衡点。
最常漏掉的三处重建：
-
p和h1–h6的margin-bottom（重置后全为 0，文字堆在一起） -
pre的white-space和background（重置后失去代码块辨识度） -
fieldset的border和padding（表单分组框塌陷，视觉结构丢失）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
