侧边栏必须用 nav + flex 实现收缩，禁用 display: none；需保留语义与可访问性，设置 aria-label、flex-shrink: 0、width/opacity 动画及 inline-flex 图标按钮。

侧边栏必须用 nav + flex，别用 display: none 隐藏

收缩不是“删掉”，而是视觉隐藏但保留语义和可访问性。用 display: none 会让键盘 Tab 直接跳过整个导航区，屏幕阅读器也读不到——这违反 WCAG 基本要求。

正确做法是保留 DOM 结构，靠 CSS 控制显隐：

• nav 必须带 aria-label，比如
• 收缩时用 width: 60px + overflow: hidden + transition: width 0.3s ease
• 文字隐藏用 text-indent: -9999px 或 opacity: 0（配合 pointer-events: none），不能靠 visibility: hidden 后再加 height: 0 —— 这会破坏焦点流
• 移动端小屏建议改用 flex-direction: column 堆叠，而不是强行收缩

小图标横排布局优先用 inline-flex，别用 float 或 table

浮动（float）在现代布局中已淘汰，它会导致父容器塌陷、换行错位、响应式失效；table 更是语义错误且难以维护。

图标按钮统一用 button 包裹 SVG 或 img，并设为 display: inline-flex：

• button 必须带 type="button"，避免表单提交干扰
• 图标子元素加 aria-hidden="true"（SVG）或 alt=""（img），防止读屏重复播报
• 横向间距用 gap，比 margin-right 更干净，不需处理末项
• 禁用背景图实现图标——状态切换（如激活/悬停）时无法独立控制颜色或尺寸

transition 宽度变化必须配 flex-shrink: 0，否则会抖动

当 nav 在 flex 容器里收缩时，如果没设 flex-shrink: 0，浏览器可能在动画过程中重新计算剩余空间，导致主内容区域“抽搐”或图标错位。

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

关键样式组合要写全：

• 外层容器： display: flex + min-height: 100vh
• nav： flex: 0 0 240px（展开态）→ 收缩态改为 flex: 0 0 60px
• 必须显式写 flex-shrink: 0，不能只靠 flex: 0 0 ... —— 某些旧版 Safari 对简写解析不一致
• 动画属性只写 transition: width 0.3s ease, flex-basis 0.3s ease，避免过渡 flex-grow 引发不可控行为

收缩后图标对齐靠 align-items: center，不是 line-height 或 padding

用 line-height 垂直居中只对单行文本有效，一旦图标尺寸变化或字体加载延迟，就会偏移；padding 手动调更难适配不同设备像素比。

真正稳的方案是让按钮本身成为弹性容器：

• button { display: inline-flex; align-items: center; justify-content: center; }
• 图标和文字都作为子元素，高度自动对齐
• 文字在收缩态下用 span 包裹，并加 opacity: 0 + transform: translateX(-10px)，比单纯 display: none 更利于动画衔接
• 注意 SVG 要设 width/height，否则在缩放页面时可能失比例

收缩逻辑本身不难，难的是所有状态（键盘焦点、读屏播报、动画帧、响应式断点）必须同步。很多人卡在点击汉堡图标后没反应，其实八成是忘了给 nav 加 flex-shrink: 0，或者用 display: none 把整个导航干掉了。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！