应使用HTML5语义标签构建管理系统页面骨架：用放logo与顶部导航，仅包裹跳转链接，唯一且承载核心操作区，用于筛选器等辅助模块；避免滥用和非语义容器。
用 <header></header>、<nav></nav>、<main></main> 定义基础骨架，别再套 <div>
<p>管理系统页面不是内容站，结构必须清晰可预测。浏览器、读屏软件、后续接手的同事，都靠语义标签快速定位功能区。硬塞一堆 <code><div class="pg-header"> 看似省事，但一改样式就崩，加无障碍支持时得重写整个 DOM。
<p>正确做法是直接用 HTML5 语义标签打底：</p>
<ul>
<li>
<code><header></header> 放 logo、顶部导航、搜索框——它天然有默认 margin 和语义角色
<nav></nav> 只包裹真正跳转用的链接（比如左侧菜单或顶部 tab），不是所有按钮都该放这里<main></main> 是唯一且必须的，承载当前页面核心操作区（如表格、表单、图表）<aside></aside> 适合放筛选器、快捷操作面板这类辅助模块，别用来塞广告或无关提示注意：<section></section> 和 <article></article> 不是布局容器替代品——它们表达的是内容逻辑分组，不是视觉分区。一个「用户列表页」里，整张表格用 <main></main> 包，不用再套一层 <section></section>。
侧边栏固定 + 内容区自适应，优先用 position: sticky 而非 fixed
后台常见「左菜单固定、右内容滚动」布局，很多人直接上 position: fixed，结果遇到两个坑：一是内容区 top 值要手动算 header 高度，header 一变就得改 CSS；二是 fixed 元素脱离文档流，和 z-index、父容器 transform 冲突频发。
立即学习“前端免费学习笔记（深入）”；
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
更稳的方案是用 sticky：
- 给
<nav></nav>加position: sticky; top: 48px;（48px 是 header 高度），它会自然贴着 viewport 滚动，但仍在文档流中 -
<main></main>用display: flex或grid布局，让内容区自动占满剩余宽度，无需手动设left偏移 - 如果必须用
fixed（比如全屏弹窗遮罩），记得给 body 加overflow: hidden，否则滚动条还在，页面会横向抖动
示例关键片段：
<header style="height: 48px;"></header> <div style="display: flex;"> <nav style="position: sticky; top: 48px; width: 200px;"></nav> <main style="flex: 1; overflow-y: auto;"></main> </div>
min-width 和 max-width 必须配对用，尤其在侧边栏和内容区
后台系统常要适配 1366px 笔记本屏到 4K 显示器，光设 width: 20% 不行——小屏下侧边栏缩成一条线，大屏下内容区宽得没法看。
真实项目里，这些值几乎总是成对出现：
- 侧边栏：
width: 200px; min-width: 200px; max-width: 240px;，既保证最小可用宽度，又防拉伸变形 - 内容区：
flex: 1; min-width: 0;（防止 flex 项不收缩），配合内部容器设max-width: 1400px; margin: 0 auto; - 表格类组件：外层加
overflow-x: auto;，内部<table> 设 <code>min-width: 100%，避免小屏下内容被截断漏掉
min-width，小屏用户会发现侧边栏文字重叠；漏掉max-width，大屏用户得拖着水平滚动条看表头。不要为了“兼容旧浏览器”放弃 Grid，IE11 已退出主流支持
有些团队还在用 float 或 inline-block 做三栏，理由是“要兼容 IE”。但截至 2026 年 10 月，IE11 的全球使用率低于 0.03%，且微软已终止所有支持。继续为它写 hack 代码，代价是维护两套布局逻辑、无法用现代 CSS 功能（比如 subgrid、container queries）。
Grid 是目前最干净的后台整体布局方案：
- 整页用
display: grid; grid-template-rows: 48px 1fr auto;控制 header/main/footer 高度分配 - main 区域再嵌一层
grid-template-columns: 200px 1fr;，比 Flexbox 更直观控制列宽 - 需要响应式时，用
@container替代媒体查询——只要容器宽度变化，布局自动调整，不依赖 viewport
真正要注意的兼容点反而是 Safari 对
subgrid的支持仍有限，如果要做嵌套网格表格，得降级用display: table或 JS 补齐，而不是回避 Grid 本身。语义标签搭骨架、sticky 替 fixed、min/max 宽度保体验、Grid 当主力——这四点卡住，布局就不会在迭代中散架。细节上最容易被忽略的，其实是
<main></main>标签的唯一性和role="main"的显式声明，尤其当页面含多个 tab 切换区域时，读屏软件只认第一个<main></main>，后面的内容得靠 aria-live 或 focus 管理。 - 整页用
