nav必须与main并列且父容器设display: flex，否则侧边栏默认块级堆顶；仅用标签无效，因浏览器按CSS流式规则渲染，需语义标签+flex布局+子项宽度控制三者缺一不可。
nav 必须和 main 并列，且父容器必须设 display: flex —— 否则侧边栏永远堆在顶部，不是“侧”而是“上”。
为什么只写 <nav></nav> 标签没用？
浏览器不认“侧边栏”这个概念，它只按 CSS 流式规则渲染。你写 <nav><ul><li><a>首页</a></li></ul></nav>，它默认就是块级元素，从上到下占满整行。要让它靠左、固定宽、主内容自适应，三件事缺一不可：语义标签 + 父容器 flex 布局 + 子项宽度控制。
常见错误现象：
-
<nav></nav>单独加float: left，但父容器没清除浮动 →main内容塌陷、文字绕进侧栏 - 用了
position: fixed但没给main加margin-left→ 主内容被遮挡，滚动时错位 - 把
<aside></aside>当导航用 → 屏幕阅读器跳过，SEO 不识别为导航区
display: flex 的父子参数怎么配？
这是现代侧边栏唯一可靠起点。别碰 float 或 inline-block，它们响应式行为不可控。
推荐写法（桌面端）：
立即学习“前端免费学习笔记（深入）”；
- 外层容器（如
<div class="layout">）设 <code>display: flex、gap: 1.5rem -
nav设flex: 0 0 260px（不缩放、不增长、固定宽） -
main设flex: 1（撑满剩余空间，不写死像素） - 若需侧边栏始终贴顶，给
nav加position: sticky; top: 0，但父容器必须有高度（如min-height: 100vh） -
垂直堆叠（推荐）：媒体查询中改
.layout { flex-direction: column; }，nav和main自然上下排列，无需 JS -
动画隐藏：用
visibility: hidden; height: 0; overflow: hidden;配合transition，同时保留aria-hidden="false"和焦点可及性
注意：flex: 0 0 260px 比 width: 260px 更安全——它防止内容撑开侧栏，也兼容 flex-direction: column 切换。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
移动端怎么处理侧边栏？别用 display: none
display: none 会让键盘 Tab 焦点直接跳过整个区域，违反 WCAG 可访问性底线。真要收起，保留 DOM 结构，只做视觉隐藏。
两种合规方案：
断点别盲目用 @media (max-width: 768px) —— iPad 竖屏也匹配，导致平板端误折叠。优先用 @media (max-width: 480px) 处理小屏，中屏（如 iPad）单独加 @media (min-width: 481px) and (max-width: 1024px) 缩窄宽度而非隐藏。
:target 能不能高亮当前侧边栏选中项？
不能。:target 只在 URL fragment（比如 #api-reference）命中时临时激活对应元素，它不记忆状态、不响应点击、也不支持多级展开。想实现“当前页高亮”，必须用 JS 监听 location.hash 或服务端注入 class="active"。
更关键的是：如果侧边栏是核心导航（比如文档大纲），就别隐藏它。小屏下优先加 overflow-y: auto 到 nav 上，配合 tabindex="0" 保证键盘可滚动、可聚焦，而不是一刀切收起。
