第 2 周：CSS 盒模型与布局

本周目标

本周完成后，应能够：

根据页面结构编写准确且易维护的选择器
解释 CSS 层叠、继承和优先级导致的样式结果
准确计算元素在盒模型中的实际尺寸
处理外边距塌陷、内容溢出和父元素高度塌陷
使用 Flex 完成导航、两栏、卡片列表和换行布局
根据简单截图独立完成一个 PC 端页面布局

学习资料与范围

主课程：HTML5+CSS3+移动 Web 视频教程
视频范围：P43-P80

视频范围	学习模块	学习结果
P43-P52	复合选择器、伪类、CSS 三大特性、背景和显示模式	能够控制样式作用范围和元素显示方式
P53-P68	结构伪类、伪元素、盒模型、版心、溢出、圆角和阴影	能够准确控制组件尺寸与视觉效果
P69-P73	标准流、浮动和清除浮动	理解传统布局方式及其问题
P74-P80	Flex 组成、轴、对齐、伸缩、换行和案例	能够使用 Flex 完成常见布局

需要掌握的知识点

选择器与 CSS 规则

后代、子代、并集、交集和兄弟选择器
:hover 等常见伪类选择器
:nth-child() 等结构伪类选择器
::before、::after 伪元素及 content
层叠性、继承性和优先级
Emmet 的常用 HTML/CSS 快速写法

背景与显示模式

背景颜色、图片、重复、位置和缩放
背景复合属性及多层背景的基本概念
块级、行内和行内块元素的特点
display 对元素显示模式的影响

盒模型

内容区、内边距、边框和外边距
标准盒模型的实际尺寸计算
box-sizing: border-box 的作用
版心宽度和水平居中
浏览器默认样式清除
内容溢出与 overflow
相邻外边距合并、父子外边距塌陷及处理方式
圆角、盒子阴影和基础卡片效果

布局

标准流中的块级和行内元素排列规律
浮动元素的特点和典型使用场景
清除浮动及父元素高度塌陷
Flex 容器、项目、主轴和交叉轴
flex-direction、justify-content、align-items
flex 伸缩比例、flex-wrap 和多行对齐
Flex 项目的单独对齐和顺序控制

必做练习

导航栏：包含默认、悬停和当前选中状态。
产品卡片：严格按照给定宽高、内边距和边框完成盒模型计算。
新闻列表：处理长标题截断和内容溢出。
两栏布局：分别使用浮动和 Flex 实现，并说明两种方式的差异。
商品列表：使用 Flex 实现固定间距、自动换行和统一卡片尺寸。
问题复现：主动制造并修复外边距塌陷和浮动导致的父元素高度塌陷。

练习涉及图片、图标或具体页面内容时，统一从提供的官网蓝湖设计图中选取，不使用视频课程的配套素材。

本周综合任务

从官网蓝湖设计图中选取一个包含导航、内容列表或卡片的页面区域，完成其 PC 端基础布局。

要求：

主体布局使用 Flex
尺寸、版心和区域间距以蓝湖标注为准
卡片可以换行且尺寸稳定
不使用表格布局，不大量使用绝对定位
页面不存在内容溢出、遮挡或意外横向滚动

本周产出

导航栏、产品卡片和新闻列表组件
浮动版与 Flex 版两栏布局
外边距塌陷和浮动问题调试记录
官网蓝湖设计图局部布局
一份盒模型和 Flex 属性笔记

完成检查

能够解释层叠、继承和优先级
能够准确计算盒模型尺寸
能够处理外边距塌陷和内容溢出
能够说明浮动后父元素高度塌陷的原因
能够使用 Flex 完成单行、多行和两栏布局
已独立完成 PC 页面布局综合练习