顶部巨大空白主因是banner元素设visibility:hidden仍占文档流空间；表单重置应调用form.reset()而非刷新页面。
页面顶部巨大空白基本就是 banner 区域被 visibility: hidden 但没脱离文档流；页面重置不是清空表单，而是调用 form.reset() 方法。
为什么 visibility: hidden 会留白
浏览器解析 HTML 时，visibility: hidden 只让元素不可见，不移除它在文档流中的占位。比如 WordPress 主题里常见的 .page-area.home_banner_section，即使加了 visibility: hidden，它的原始高度（可能 200px+）仍会撑开顶部空间。
- 检查方式：打开开发者工具（F12），在 Elements 面板中悬停该元素，看高亮区域是否覆盖大片空白
- 错误写法：
div.page-area { visibility: hidden; }—— 无效隐藏，只“隐身”不“消失” - 正确写法：
.page-area.home_banner_section { display: none !important; }—— 彻底从渲染树移除 - 加
!important是为压过主题内联样式或高优先级 CSS；上线后可改用更具体选择器（如body.home .page-area.home_banner_section）替代
如何安全触发表单重置
页面重置 ≠ 刷新页面，而是将所有表单控件恢复到初始值（即 HTML 中写的 value、checked、selected 等状态）。直接调用原生 reset() 方法最可靠，不依赖 JS 框架或手动赋值。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 推荐写法：
<input type="button" value="重置" onclick="this.form.reset()"> - 注意：
this.form必须能准确指向包裹它的<form></form>元素；若按钮不在<form></form>内，需显式获取，例如：document.getElementById('myForm').reset() - 不要用
location.reload()或history.go(0)代替——它们会丢弃用户已填内容、触发重复提交、重发请求 - 如果表单含动态生成字段（如 JS 添加的
<input>），reset()不会还原这些字段，需额外清理 DOM
其他常见顶部留白原因与快速排查
除了 banner 占位，顶部空白还可能来自默认样式或布局模型错配，建议按顺序快速验证：
立即学习“前端免费学习笔记（深入）”；
-
<h1></h1>～<h6></h6>自带margin-top（Chrome 默认约 0.67em），检查是否漏重置：header h1 { margin-top: 0; } -
<ul></ul>在<nav></nav>内时，其默认margin-top: 1rem会外溢（margin collapse），应重置：nav ul { margin: 0; } - 父容器用了
display: flex但未设flex-direction: column，导致<header></header>和<nav></nav>被水平排列并撑宽，视觉上像“顶部空了一块” - 强制刷新（Ctrl+F5）并清空缓存，避免旧 CSS 缓存干扰判断
真正难处理的不是某一行 CSS，而是多个隐藏层叠效果叠加后的结果——比如 banner 被 display: none 了，但 header 里的 h1 还带着默认 margin，再叠加 nav 的 ul 外溢 margin，三者一叠加，顶部就空出 60px 以上。动手前先用开发者工具逐层关掉样式，比盲目改代码快得多。
