CSS 布局教程：掌握主流布局方式与方案选择

本阶段核心目标

掌握 CSS 中主流的布局方式（文档流、浮动、定位、Flexbox、Grid），能根据不同的页面需求选择合适的布局方案，实现从简单的元素排列到复杂的页面整体结构搭建，解决'元素排列混乱''垂直居中困难''响应式适配'等布局难题。

学习节奏

按「传统布局（文档流/浮动/定位）→ 现代布局（Flexbox/Grid）」推进，每个布局方式搭配「原理讲解 + 核心属性 + 实战案例 + 常见问题」，全程基于外部样式表开发，培养布局思维和方案选择能力。

前置要求

1. 已掌握 CSS 选择器、盒子模型、文字/背景样式，能独立编写外部样式表；

2. 熟悉 HTML 常用标签及嵌套结构；

3. 会用 Chrome 开发者工具调试 CSS 样式。

课前预览

第 1 小节：传统布局基础——文档流与浮动布局

模块 1：CSS 布局的核心概念（10 分钟，建立布局思维）

1.1 什么是布局？

布局就是在页面上合理地安排和组织元素的位置、大小和排列方式，以实现