重置按钮“清不干净”是因为它并非清空，而是回滚到HTML初始值；对JS动态修改的value、textarea文本、file输入框及disabled控件均无效，且form.reset()行为相同，无法触发框架响应或事件监听。
浏览器 UA stylesheet 的硬编码 margin 和 font-size 是隐患源头
HTML 标题、段落、列表这些元素的默认样式不是“没写 CSS”，而是由浏览器内置的 UA stylesheet 强制注入的，比如 <h1> 固定是 font-size: 2em、margin: 0.67em 0，<p> 固定有 margin: 1.12em 0。这些值不随你写的 CSS 变，也不继承父级，每个元素自己带一套出厂设置。
常见错误现象：
- 在
<h2>后面直接放<p>，中间空一大截——不是你漏写了margin-bottom: 0，而是两者各自带 margin 叠加 - 用
<h3>当按钮文字，字体突然变小还上下留白，排查半天发现是语义标签自带样式压过了 class -
<ul>前后多出空白，单独重置margin: 0不够，还得处理padding-left: 20px才保住项目符号缩进
全局选择器污染 DOM 的真实路径
真正导致样式覆盖的，从来不是你写的 .btn-primary 冲突，而是第三方 HTML 片段或 UI 库里埋着的 body { margin: 0 }、button { outline: none } 这类无前缀规则。它们通过 document.head.appendChild(<style>...</style>) 或 v-html 直接注入，绕过所有模块化机制。
实操建议：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- BEM 或 CSS Modules 对
ul { margin: 0 }完全无效——它不靠类名，靠标签名匹配 - 微前端子应用卸载时，
document.styleSheets里残留旧<style>是常态，尤其 Ant Design Modal 默认挂到document.body，样式脱离容器就收不回来 - 用
attachShadow({ mode: 'open' })是唯一原生隔离方案，body、button这类选择器进不去 shadow root，但得手动把 HTML 字符串 parse 后注入，不能直接shadowRoot.innerHTML = htmlString
表单元素的窗口级渲染会穿透 z-index
<select>、<input type="file"> 等是有窗口元素（windowed element），它们的渲染层在操作系统层面高于普通 DOM，所以无论你怎么设 z-index: 9999，都盖不住 <select> 下拉框。这不是 CSS 错误，是浏览器底层限制。
使用场景：
- 弹窗里放
<select>，下拉选项总被遮挡——别调z-index，换getPopupContainer挂载点或用dropdownRender自定义下拉内容 -
<iframe>在旧版 IE 中也是 windowed 元素，和<select>同级，无法用 CSS 层叠控制顺序 - 现代浏览器（Chrome/Firefox/Safari）已基本将
<iframe>视为无窗口元素，但<select>仍保持窗口级优先级
按钮默认 type=submit 是隐藏的 DOM 重置器
没写 type 的 <button> 在 <form> 里默认就是 submit，点击即触发表单提交——页面刷新会清空所有 JS 修改的 class、style、innerHTML。你看到控制台 log 执行了，但视觉没变，是因为 DOM 刚改完就被重载覆盖了。
容易踩的坑：
- 富文本编辑器工具栏按钮、弹窗关闭按钮、表单内“暂存”按钮，只要在
<form>里，就必须显式写type="button" - React/Vue 组件中用
@click.prevent或event.preventDefault()只是补救，不如从根源上设type -
type="reset"同样危险：它会把所有<input>值还原，连带清掉你用 JS 动态设的 value
真正难处理的是那些动态生成的 HTML，比如 CMS 插件返回的片段里混着未声明 type 的 <button>——这种污染不会报错，只会让交互逻辑间歇性失效。
