第 6 周：布局与渲染

重点：从"文档流"到"渲染树"——浏览器如何把代码变成像素；布局方案是渲染规则的运用。CSS 布局方法的演化史（表格→浮动→定位→flex→grid）是一条"越来越接近排版本质"的路。 边界：文本流内的排版（字体/排印）归第 5 周；JS 动态改样式归第 7 周起；组件化 UI 归第 14 周，框架只讲用法与取舍。

课堂任务

渲染基础：从代码到像素

布局之前先懂规则——浏览器如何呈现，元素如何定型：

1. 关键渲染路径 — CRP：HTML/CSS 如何变成渲染树再绘制成像素
2. 定型 — 盒子模型：一切元素皆是盒子
3. 屏幕 — 布局的物理载体：尺寸、分辨率与像素密度

布局：方法的演化

按历史顺序学，每一种都是对前一种缺陷的回答：

1. 表格布局 — 布局是什么：网页元素之间的相对关系（古代方案，理解其为何被抛弃）
2. 浮动布局 — 用浮动的特性"漂"出多栏
3. 定位 — 脱离文档流：相对、绝对、固定
4. 弹性盒子布局 — flex：一维布局的现代答案
5. 栅格布局 — 用栅格系统约束多栏（浮动时代的工程化方案）
6. 栅格盒子布局 — 原生 CSS Grid：二维布局的现代答案

响应式：一套代码适配所有屏幕

1. 流体布局 — 用相对单位让版式随视口流动
2. 媒体查询 — 按条件切换样式的机制
3. 移动优先 — 从小屏开始设计的策略
4. 响应式设计 — 设备谱系与响应式全貌

框架

1. CSS框架 — bootstrap 与 tailwindcss 的区别与联系

作业

• 个人项目：首页完成 flex 或 grid 多栏布局，并在手机宽度下不破版