先拆区域再谈布局
布局决定元素彼此的位置关系先拆区域，再看怎么排
字号、颜色、边框，是在管「长什么样」；这一课先看页面怎么拆成几个区域——谁在上面，谁在左边，谁占主体。布局的核心不是背 CSS 属性，而是先把页面「分区」想清楚。下面三种是最常见的骨架。
传统门户 / 官网骨架header + nav + banner + main + footer
典型结构是 header + nav + banner + main + footer。适合首页、活动页、产品官网，重点是先把入口、主视觉和内容区分开。
可以这样描述给 AI
做一个门户首页：顶部是 header，里面放 Logo 和导航；中间是大 banner 和三块功能卡片；下方是 footer。桌面端三列卡片，移动端收成单列。
关键词：header、nav、banner、main、footer
后台管理系统骨架header + aside + main
结构上通常是 header + aside + main，其中 aside 贴最左并铺满高度，main 吃掉剩余空间。
可以这样描述给 AI
做一个后台管理系统：顶部是 header；左侧是固定宽度的 aside 导航，贴最左并铺满整条高度；右侧 main 作为主体区域，展示表格、图表和表单；移动端把侧边栏收起。
关键词：header、aside、main、固定宽度、占据主体
博客 / 文章详情页骨架header + article + aside + footer
主内容是文章，右侧是作者信息、目录和相关文章。你现在正在看的就是这个布局。
可以这样描述给 AI
做一个博客详情页：顶部是 header；中间左边是文章正文 article，右边是 aside，放作者信息、目录和相关文章；底部是 footer；移动端把右侧栏折到下方。
关键词：article、aside、目录、footer、单列
正文内容…
正文内容…
左右位置主要由 CSS 决定aside 只是语义标签
为什么写了 aside，有时在左边，有时在右边？
aside 只是语义标签，本身不决定左右。真正决定它在哪一侧的是父容器的 CSS：如果用了 flex，就看 flex-direction / order；如果用了 grid，就看列怎么分配。HTML 负责表达「这里是 aside」，CSS 负责决定位置。
那移动端为什么经常又会变成上下排列？
因为在窄屏下，CSS 往往会把原来的两列布局改成单列——最常见做法是 flex-direction 从横向（row）改成纵向（column），或者重设 grid-template-columns。这样正文优先展示，aside 再往下堆叠，这叫响应式布局。