课程首页
第 9 课
课堂目录
盒模型、背景与渐变
27 页 · 观察、修改代码与运行验证
打开课堂展示
逐页打开源码课件
01
从“好看”到“放得下、读得清”
02
盒模型的四个区域
03
content-box：width 指内容区宽度
04
border-box：把内边距和边框算进 width
05
预测：300px 的卡片能放进 330px 吗？
互动
06
width、min-width 与 max-width
07
overflow：内容超出盒子时怎样显示
08
相邻块的垂直外边距合并
09
display：行内、块级与行内块
10
验证：同一行的 span 为什么没有变成 140px？
互动
11
给活动卡片添加背景颜色和图片
12
cover 与 contain：铺满还是完整显示
13
渐变：由浏览器生成的背景图像
14
用 DevTools 核对盒模型尺寸
15
语法与规则速查
16
通知卡片的尺寸与留白
17
代码预测：边框盒与内容区宽度
18
通知变长后的高度处理
19
最小宽度与内容区
20
审查 AI 建议：border-box 的适用范围
21
渐变背景与卡片尺寸
22
Flexbox：让活动按钮排列与换行
23
Grid：把活动卡片排成行与列
24
媒体查询：按视口宽度切换列数
25
容器查询：按卡片所在空间排版
26
盒模型与行内元素尺寸
27
本课小结