03CSS 布局
内容终于要「放」到正确的位置上了。6 节课覆盖布局的全部现代手段： 文档流、浮动、定位、溢出处理，以及接管一切的 Flex 与 Grid。 每个属性都配取值分析表，每个知识点都配可随手修改的实时实验台。
课程列表
01
布局与对齐
文档流的默认规则、改变布局的三大手段，以及水平 / 垂直居中的前四招。
02浮动
文字环绕的本职、脱离文档流的三特性、高度塌陷与 clearfix 修复、float 三栏历史遗产。
03定位
position 五种取值、参照物链、角标与绝对定位居中、fixed / sticky、z-index 层叠。
04溢出处理
溢出的成因、overflow 四取值、单行 / 多行省略号、定制滚动区域。
05Flex 弹性布局
主轴与交叉轴、容器六属性、项目四属性，以及等宽导航、完美居中、圣杯布局、沉底页脚四大配方。
06Grid 网格布局
轨道单位 fr / minmax / repeat、网格线定位、命名区域、对齐全家桶、响应式卡片墙。
本章你将学会
- 看懂浏览器默认的文档流规则，知道块级与行内元素如何自然排列
- 用
float做文字环绕，理解其三特性与高度塌陷，以及 clearfix 修复法 - 用
position五种取值精确「钉住」任意元素，掌握参照物链与 z-index 层叠规则 - 用
overflow收场溢出内容，熟练写出单行 / 多行省略号 - 用 Flex 处理一维排队，用 Grid 处理二维铺格，直接背下实战四大配方
- 拿到一个布局需求，能判断该用哪种手段、各属性取哪些值
实验台使用指南
本站每个知识点都配有「左代码、右预览」的实验台，几个隐藏技能先交底：
| 操作 | 效果 |
|---|---|
| 直接改左侧代码 | 右侧预览 0.35 秒内自动刷新，所见即所得 |
| 拖拽中间分隔条 | 左右分屏比例任意调整，双击分隔条恢复 1:1 |
| 工具栏「主题」下拉 | 暖墨 / 暖纸 / 夜幕 / 抹茶四套语法高亮主题，全站记忆 |
| Tab 键 | 在代码框内缩进 4 个空格 |
| 「重置」按钮 | 改乱了也不怕，一键回到初始代码 |
| 顶栏「课程大纲 / 扩展阅读」 | 左侧抽屉跳任意课时，右侧边栏去 MDN / 菜鸟深挖 |
学习建议：每个实验台都至少改三处值。布局的属性特别适合「改数看变化」——
把
justify-content 换一个值、把 flex: 1 改成 flex: 2、
把 top: 50% 改小，都比背口诀记得牢。