module 03 · css 布局与响应式 · 第 17–24 课
目标一句话：掌握现代布局主力 Flex 与 Grid，做出手机、平板、桌面都能用的页面。
// module 03
// 模块三 · 第 17 课
block 独占一行、可设宽高inline 不换行、宽高由内容决定、垂直 margin 无效inline-block 兼具两者 · none 与 visibility: hidden 的区别把导航项分别设成三种 display 观察排版差异；用 inline-block 把导航项排成一行并留出间距。
验收：能说出为什么给 span 设宽高不生效；能说清 none 与 hidden 的区别。
一句话记住：block 管区块，inline 管文字，inline-block 管一行里的小方块。
// 模块三 · 第 18 课
position 五个值：static / relative / absolute / fixed / stickyz-index 与层叠顺序 · 父级层叠上下文实现三个效果：固定顶部导航（fixed）、卡片右上角角标（absolute + 父级 relative）、「回到顶部」悬浮按钮（fixed）。
验收：absolute 元素落在父卡片内部而不是页面角落；滚动页面时导航不动。
口诀：子绝父相 —— 想让一个元素绝对定位到某个位置，先给它的父元素加 position: relative。
// 模块三 · 第 19 课
float 的原始用途：图文环绕clear / overflow: hidden / ::after clearfix用浮动实现双栏布局 → 用 clearfix 修复高度塌陷 → 再用 Flex 重写一遍，写下两者的差异感受。
验收：能复现并解释"塌陷"现象；能说出为什么现在推荐 Flex。
给学生明确结论：浮动是历史，知道它、会修它，但新代码用 Flex / Grid。
// 模块三 · 第 20 课
display: flex 开启弹性布局，主轴与交叉轴的概念flex-direction：row / columnjustify-content（主轴对齐 6 种）· align-items（交叉轴对齐）flex-wrap 换行与 align-content · gap 间距完成三个小 demo：① 横向导航栏（两端对齐、垂直居中）② 卡片水平垂直居中（写三种不同写法）③ 自动换行的标签组。
验收：能说清"哪个方向是主轴"；改 direction 后知道 justify / align 的作用轴会互换。
// 模块三 · 第 21 课
flex-grow / flex-shrink / flex-basis 与 flex: 1 1 auto 简写align-self 单独对齐 · order 排序用 Flex 完成三栏布局：左栏固定 240px + 主内容自适应 + 右栏 300px；窗口变窄时纵向堆叠。
验收：主内容能随窗口伸缩；文本过长时能正常省略（min-width: 0）。
// 模块三 · 第 22 课
display: grid · 网格线与行列定义grid-template-columns / rows · fr 单位 · gaprepeat + auto-fit + minmax 实现自动列数grid-template-areas 与 grid-area 命名区域① 用 repeat(auto-fit, minmax(240px, 1fr)) 做响应式卡片网格（不用媒体查询）② 用命名区域做一个「杂志式」大小格混排版面。
验收：改变窗口宽度时卡片列数自动变化；区域命名与内容对应正确。
选型原则：一维排布用 Flex，二维排布用 Grid。两者不是替代关系，是配合关系。
// 模块三 · 第 23 课
viewport meta 为什么必须写min-width 递进书写clamp()）· 图片自适应让第 16 课的个人页在 375 / 768 / 1440 三个宽度下都正常显示：内容不溢出、字号可读、卡片合理换行。
验收：三端各截一张图；手机端没有横向滚动条。
先写移动端样式，再用 min-width 逐级增强 —— 这就是移动优先。
// 模块三 · 第 24 课 · 阶段实战
这一版落地页是后续 JS 模块的操作对象——第 33 课起，我们给它加交互。
// module 03 · summary
这一版落地页是后续 JS 模块的操作对象 —— 第 33 课起我们会给它加交互，第 35 课加暗黑模式，第 36 课加动态列表。