HTML清除默认样式结构_HTML文档基础样式重置方法-html教程-PHP中文网

应优先引入normalize.css而非通配符重置，因其修复跨浏览器差异并保留语义化默认行为；仅在封装自定义组件时用all: unset局部重置并手动补display。

html清除默认样式结构_html文档基础样式重置方法

别用 * { margin: 0; padding: 0; }，它会直接破坏表单控件可用性、可访问性和语义层级；真正该做的是优先引入 normalize.css，只在封装自定义组件时才考虑局部重置。

为什么`* { margin: 0; padding: 0; }`必须避免

这个写法不是“干净”，是“失控”：

input 和 textarea 失去默认内边距，文字紧贴边框，iOS 上 select 下拉箭头直接消失
button:focus 的轮廓被清掉，键盘用户完全无法识别当前焦点
h1–h6 全部退化为 1em 字号，标题语义层级彻底崩塌
强制浏览器为每个 DOM 节点执行通配符匹配，页面节点超 2000 个时，CSSOM 构建明显变慢
box-sizing 被统一设为 content-box，后续写 width: 100%; padding: 12px 会撑出容器

应该用`normalize.css`替代全局 Reset

它不归零，而是修复差异、保留有用默认行为：

h1–h6 仍保持大小关系，只统一 margin-top/margin-bottom
ul、ol 保留缩进（用 padding-left），但修正了 Firefox/IE 缩进实现不一致的问题
input、button 在 Chrome/Safari/Edge 中默认尺寸、行高、光标行为更一致
code、sub、sup 等仍维持语义化排版表现

引入方式极简，且必须放在你自己的 CSS 文件之前：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">

哪些场景真需要局部“归零”？用什么重置

仅当你封装完全自定义组件（如 UI 库里的 Button、Card），且明确拒绝任何父级或浏览器默认样式干扰时，才考虑局部重置：

用 all: unset 清除继承 + 默认样式，但会丢失 display，记得手动补上：.my-button { all: unset; display: inline-block; }
用 all: revert 恢复浏览器原生样式（比如让某个 button 回到系统默认外观）
避免对 body 或 html 应用 all，它会影响滚动条、焦点轮廓、字体抗锯齿等底层行为