CSS：盒模型、布局与响应式
CSS 负责页面怎样呈现。先看每个盒子的实际尺寸，再用布局规则分配空间，任务页面才能在窄屏和宽屏上都保持可读。
- 能解释任务卡为什么换行，并让表单、筛选和列表在手机宽度下无需横向滚动。
- 选择器、继承与样式覆盖
- 验证CSS：盒模型、布局与响应式后，应当能解释任务卡为什么换行，并让表单、筛选和列表在手机宽度下无需横向滚动，并保留页面结构、不同宽度截图、控制台和元素状态作为可重复检查的依据。
- 完成 3.1「HTML：搭出有语义的页面结构」
FOUNDATION
必须理解
CSS 控制浏览器怎样排版已有内容。看懂尺寸和布局规则以后，你不必再靠反复试数字碰运气。
本课依次讲清选择器、继承与样式覆盖、盒模型、间距和可用宽度和Flex、Grid 与响应式布局，最后通过“加入窄屏规则，测试按钮换行、长标题和空状态”检查学习结果。
HTML 列出了房间里的物品，CSS 像摆放说明。它决定桌子离墙多远、几件物品并排还是换行，以及房间变窄时怎样重新安排。
任务应用在宽屏上让输入框和按钮并排，在窄屏上改为上下排列。任务卡保持可读宽度，长标题可以自然换行。
选择器、继承与样式覆盖
选择器负责找到元素，声明负责设置样式。同一个属性可能来自多条规则，浏览器会结合匹配范围和书写顺序决定采用哪一个。
基础概念
CSS（Cascading Style Sheets，层叠样式表）用选择器找到 HTML 元素，再用属性和值描述外观。多条规则可能同时作用于同一个元素。
进一步理解
选择器回答改谁，声明回答改什么。浏览器会综合规则来源、选择器匹配范围和书写顺序，得到最终样式。
开发者工具的 Styles 面板会显示哪些声明生效、哪些被覆盖。排错时先看证据，比继续添加新规则更省时间。
任务输入框同时受到 input 规则和表单内部规则影响。打开样式面板，可以看到最终宽度和间距来自哪一条声明。
继承会让部分文字样式传给子元素，层叠会在多条规则中决定结果。两者都会影响最终画面，但发生原因不同。
这一小节记住：样式没生效时，先确认选择器命中，再检查规则是否被覆盖。
盒模型、间距和可用宽度
页面上的元素都可以看成盒子。内容外面依次有内边距、边框和外边距，最终占用宽度要把这些部分一起算进去。
基础概念
盒模型把一个元素占用的区域分成内容、内边距、边框和外边距。元素最终需要多少空间，取决于这几层共同作用。
进一步理解
内容区域放文字或子元素，padding 在内容和边框之间留白，border 画出边界，margin 负责元素外部距离。
设置 `box-sizing: border-box` 后，声明宽度会包含内边距和边框，更容易让表单控件待在容器内。
任务输入框设为填满可用空间时，如果还额外加入内边距与边框，就要确认盒模型没有让它超过表单宽度。
margin 处理元素外部距离，padding 处理元素内部留白。两者都能让画面出现空隙，却不能随意互换。
这一小节记住：尺寸问题先在盒模型图中找到是哪一层增加了空间。
Flex、Grid 与响应式布局
Flex 适合安排一行或一列中的项目，Grid 适合同时管理行和列。响应式布局关注可用空间，不等于为每一种设备写一套页面。
基础概念
布局规则决定多个元素怎样排列。Flex 适合一条主轴上的项目，Grid 适合同时管理行列，媒体查询可在空间不足时切换规则。
进一步理解
响应式布局根据可用空间调整排列方式。它通常保留同一份 HTML，只改变列数、换行和控件宽度。
窄屏检查不能只看首页截图。长标题、错误提示、多个按钮和空状态都会改变所需空间，也应一起测试。
任务表单在宽屏让输入框和按钮同排，窄屏改为上下排列。任务标题过长时自然换行，按钮仍保持可点击。
Flex 和 Grid 不是新旧替代关系。选择哪一个取决于要控制一条方向，还是需要明确的二维行列。
这一小节记住：布局要跟着内容和空间变化，不能只适配自己的屏幕。
AI COLLABORATION
AI 如何参与
在CSS：盒模型、布局与响应式这一课，AI 负责根据真实材料解释选择器、继承与样式覆盖并指出遗漏，学习者负责控制范围、执行修改和核对页面结构、不同宽度截图、控制台和元素状态。
推荐协作顺序
- 1
先截取出问题的 HTML 和相关 CSS，不把整站都交给 AI。
- 2
请 AI 解释元素当前占用宽度的来源，再提出最小修改。
- 3
修改后拖动视口，并检查短内容、长内容和空列表。
这是任务页面的 HTML 和两张不同宽度的截图。请先列出布局问题和对应选择器，再给最小 CSS 修改。不要改 HTML，不使用绝对定位修补。每项修改都说明预期现象，并告诉我在盒模型和响应式模式中怎样验收。
样式规则能对应到真实元素，布局会随可用宽度变化，长标题和按钮不会互相遮挡；CSS：盒模型、布局与响应式的人工验收必须回到真实页面、请求、终端、测试或数据结果，不能用 AI 的文字说明代替。
人工检查清单
- 在开发者工具中关闭关键规则，确认自己知道哪一条负责当前布局，再用窄屏与长文字测试。
- 让 AI 逐条对应选择器与页面元素，并说明为什么选择 Flex、Grid 或普通文档流。
- 使用开发者工具切换窄屏，加入长任务标题和错误提示，核对没有遮挡与横向滚动。
COMMON TRAPS
常见误区
下面三类问题会让任务看似完成，却经不起刷新、错误输入或真实环境检查。先看现象，再找原因和修正方法。
不断增加固定宽度
- 你会看到
- 当前屏幕正常，稍窄一点就溢出或遮挡
- 为什么发生
- 固定数值只适合当前视口，内容或屏幕一变就没有伸缩空间。
- 怎样纠正
- 优先使用可用宽度、最大宽度和自然换行
用绝对定位拼页面
- 你会看到
- 内容增多后元素彼此覆盖
- 为什么发生
- 脱离正常布局的元素不会为后续内容让位，文字增多时就会互相覆盖。
- 怎样纠正
- 让主要区域参与正常布局，只把绝对定位留给局部叠放
只拖动窗口凭感觉验收
- 你会看到
- 某些断点和长文本问题没有被发现
- 为什么发生
- 随手拖动很难重复同一尺寸，也容易漏掉临界宽度和极端内容。
- 怎样纠正
- 使用固定测试宽度并加入超长任务文本
HANDS-ON
动手任务
能解释任务卡为什么换行，并让表单、筛选和列表在手机宽度下无需横向滚动。
- 完成 3.1「HTML：搭出有语义的页面结构」
跟着做
- 01
创建 style.css 并从 HTML 正确引用。
- 02
设置基础字体、页面背景和内容最大宽度。
- 03
用 Flex 排列表单，让输入框获得剩余空间。
- 04
为任务项设置间距、边框和完成状态。
- 05
加入窄屏规则，测试按钮换行、长标题和空状态。
能解释任务卡为什么换行，并让表单、筛选和列表在手机宽度下无需横向滚动。
只改变浏览器宽度，不修改 HTML，让任务列表在宽屏保持舒展，在手机宽度仍能完整操作。
离开本课前，自问四件事
- 选择器、属性和值在一条 CSS 规则中分别做什么？
- 盒模型四层怎样共同决定元素占用空间？
- 什么时候更适合用 Flex，什么时候考虑 Grid？
- 我用哪些内容和宽度验证页面确实能响应变化？
确认完成后，会同步更新学习中心的课程学习进度。