本阶段核心目标
掌握 CSS 中主流的布局方式（文档流、浮动、定位、Flexbox、Grid），能根据不同的页面需求选择合适的布局方案，实现从简单的元素排列到复杂的页面整体结构搭建，解决'元素排列混乱''垂直居中困难''响应式适配'等布局难题。
学习节奏
按「传统布局（文档流/浮动/定位）→ 现代布局（Flexbox/Grid）」推进，每个布局方式搭配「原理讲解 + 核心属性 + 实战案例 + 常见问题」，全程基于外部样式表开发，培养布局思维和方案选择能力。
前置要求
-
已掌握 CSS 选择器、盒子模型、文字/背景样式，能独立编写外部样式表；
-
熟悉 HTML 常用标签及嵌套结构；
-
会用 Chrome 开发者工具调试 CSS 样式。
课前预览
第 1 小节：传统布局基础——文档流与浮动布局
模块 1：CSS 布局的核心概念（10 分钟，建立布局思维）
1.1 什么是布局？
布局就是在页面上合理地安排和组织元素的位置、大小和排列方式，以实现