博客侧边栏导航需用语义化标签、flex布局和CSS切换实现：①用替代确保无障碍与SEO；②设flex:1和min-width:0，设width和flex-shrink:0；③用checkbox hack控制三态，收起时opacity+visibility过渡文字，按钮z-index需高于正文。
博客侧边栏导航不是“塞个 div 就完事”，关键在结构语义清晰、宽度切换不破坏主体流、收起后按钮可触达——这三点没处理好，用户点不动、文字闪跳、内容区被遮盖，全是高频翻车现场。
用 <nav></nav> 包裹，别用 <div>
<p>屏幕阅读器靠 <code><nav></nav> 识别导航区域，搜索引擎也据此判断页面核心链接权重。如果写成 <div class="sidebar"><ul>...</ul></div>，语义丢失，无障碍和 SEO 都打折扣。正确结构是：
<aside>
<nav aria-label="博客分类导航">
<ul>
<li><a href="/category/web">前端</a></li>
<li><a href="/category/design">设计</a></li>
</ul>
</nav>
</aside>
注意加 aria-label，否则屏幕阅读器只读“导航”，不知道这是“博客分类导航”。
右侧定宽 + 左侧自适应，优先选 flex 布局
博客正文（<main></main>）在左、侧边栏（<aside></aside>）在右，是最常见结构。此时用 display: flex 比浮动或绝对定位更稳：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
-
<main></main>设flex: 1，自动吃掉剩余空间，侧边栏缩放时它实时重排，不会撑破容器 - 必须给
<main></main>加min-width: 0，否则内部长单词或未换行代码块会把布局顶开 - 侧边栏设
width（展开态）和flex-shrink: 0，避免被 flex 压缩变形 - 不要用
grid切换grid-template-columns，列轨道重算会导致一次明显跳跃，尤其在 Safari 中
伸缩控制用 checkbox hack，别绑 JS
纯 CSS 实现三态（全展开 / 图标态 / 隐藏）最可靠：用隐藏的 <input type="checkbox"> 当状态开关，配合 :checked 和兄弟选择器驱动样式变化。
- 按钮必须是
<label for="toggle"></label>，且for值与input的id严格一致，否则点击无效 - 侧边栏要放在
input后面，且中间不能有其他非兄弟元素阻断~选择器链路 - 收起后留下的按钮区域（比如 64px 宽）必须设
z-index大于正文，否则被<main></main>盖住点不到 - 移动端需额外加
@media (max-width: 768px)把侧边栏设为position: fixed+transform: translateX(-100%)，再用遮罩层控制显隐
收起时文字消失要平滑，别用 display: none
直接切 display 会导致布局重排抖动，且无法过渡动画。正确做法是：
- 对文字容器（如
<span class="nav-text"></span>）设opacity: 0+visibility: hidden，并加transition: opacity 0.3s, visibility 0.3s - 图标容器（
<i></i>或<svg></svg>）保持显示，仅通过transform: translateX()微调位置，保证视觉对齐 - 避免用
font-size: 0或width: 0隐藏文字——前者影响可访问性，后者可能触发浏览器渲染 bug，导致文字残留白块
最易被忽略的是 <main></main> 的 min-width: 0 和收起态按钮的 z-index 层级，这两个点一漏，整个伸缩交互就卡在“点一下没反应”或“收一半卡住”。
