display: flex 做主内容+侧边栏更可靠，因 float 脱离文档流致高度塌陷、需手动清浮动且易错位；flex 天然支持对齐伸缩、语义不破坏，主区 flex: 1 自动占满，侧栏 flex: 0 0 280px 明确控制，响应式改 flex-direction: column 即可单列，IE11 支持良好。
用 display: flex 做主内容+侧边栏，为什么比 float 更可靠？
因为 float 会脱离文档流，导致父容器高度塌陷、后续元素错位，还得手动清浮动（clear: both 或伪元素 hack），稍一疏忽就整页错乱。而 flex 是布局级原语，天然支持对齐、伸缩、顺序控制，且不破坏语义流。
- 主内容区写
flex: 1，自动占满剩余宽度；侧边栏设width: 280px或flex: 0 0 280px，明确不伸缩不收缩 - 响应式时，直接在媒体查询里改
flex-direction: column，两栏自然变单列，无需重写结构 - IE11 支持良好，但需补
flex-wrap: wrap防窄屏下侧边栏被挤到下方 - 避免把
article和aside直接塞进flex容器却不设display: flex—— 父容器漏设display是最常见失效原因
用 display: grid 实现双栏，grid-template-columns 怎么配才不踩坑？
grid 更适合明确列宽关系的场景，比如“主内容占 3 份，侧边栏固定 280px”，但它对 HTML 结构容忍度低：子元素必须是直接子级，不能多套一层 div 包裹。
- 推荐写法：
grid-template-columns: 1fr 280px——1fr表示等分剩余空间，比auto或minmax()更直观稳定 - 若侧边栏内容少导致高度塌陷，别靠
min-height硬撑，而是给aside加align-self: start，让其按内容高度对齐顶部 - 不要在
grid容器里再嵌flex布局的导航或文章列表——不是不能，而是容易因flex-shrink触发意外压缩 - 移动端切单列时，用
grid-template-columns: 1fr即可，但记得同时设grid-auto-flow: row防止旧版 Safari 错位
语义化标签怎么放，才不会让屏幕阅读器和 SEO 报错？
博客页面不是 div 堆砌场。main 必须包裹全部主体内容（含文章和分页），aside 只用于附属信息（作者介绍、分类标签、近期文章），header 和 footer 不能出现在 article 内部。
-
article里只放一篇独立、可复用的内容单元，标题必须是h1或h2（视上下文层级），不能是div+ class 模拟 - 代码块必须嵌套在
pre里，且内层用code标签，否则语法高亮插件无法识别、读屏器无法跳过 - 侧边栏里的链接列表用
nav包一层更规范，但若只是静态信息（如作者简介），用aside就够了，不必硬套nav - 检查 Chrome DevTools 的 Lighthouse，如果提示 “
document does not have a main landmark”，大概率是main缺失或位置错了
移动端双栏变单列时，哪些 CSS 属性最容易被忽略？
很多人只写 @media (max-width: 768px) 改宽度，却忘了处理 flex/grid 的行为继承和内容溢出。
- flex 容器要加
flex-wrap: wrap，否则窄屏下侧边栏会被强制压缩甚至文字折行错乱 - 所有带固定宽的元素（如
width: 280px）必须在媒体查询里重置为width: 100%或max-width: 100%，否则横向滚动条必出 -
pre代码块默认不换行，移动端必须加white-space: pre-wrap和overflow-x: auto，否则长代码直接撑破视口 - 字体大小别只用
px，至少主内容用rem，配合html { font-size: clamp(16px, 1.2vw, 18px); }动态缩放
实际调试中最耗时间的，往往不是布局本身，而是语义标签嵌套错位导致的无障碍校验失败，或是 pre 里漏了 code 导致代码块失去可复制性——这些细节不报错，但一上线就被用户或审核工具揪出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
