项目7：CSS3盒模型

🎯 教学目标

知识目标

1. 掌握CSS3中盒模型的概念及组成部分。
2. 掌握定位的概念及用法（相对、绝对、固定）。

能力目标

1. 能用盒模型进行网页布局及设计。
2. 能熟练运用定位进行网页元素布局。

素质目标

1. 培育“大国工匠”精神。
2. 培养团队合作解决问题的能力。
3. 树立正确的世界观与爱国主义情怀。

🚩 任务1：制作“花卉相册”页面

📚 任务要求

熟练掌握盒模型的设置方法和相关属性。
利用盒模型相关元素制作完成“花卉相册”页面。
注意主题颜色的选择，要突出页面主题。
在完成参考案例的基础上添加自己的创意。

💡 学习准备：盒模型与轮廓

盒子模型的组成：外边距 (margin)、内边距 (padding)、边框 (border)、内容 (content)。

🔍 相关知识点：CSS轮廓属性 (outline)
outline属性用于在元素边框外围绘制一条线，且不会占用页面实际物理布局。
• outline-style: 同边框样式，但少一个 hidden。
• outline-color: 增加了一个属性值 invert (背景色反色)。
• outline-width: 用法参考边框宽度。

🎨 任务实施效果

中国传统花卉相册
欢迎浏览中国传统花卉相册... (此处可插入相册图片网格)

✨ 课外拓展：伪类 :hover

“:hover”是一种伪类，用于为超链接定义样式效果。当鼠标指针移动到超链接处会触发相应CSS样式变化。

/* 示例：鼠标悬停时改变背景色 */
a:hover {
    background-color: #e74c3c;
    color: white;
}

🚩 任务2：制作“龙江旅游”页面

📚 任务要求

熟练掌握块元素和行内元素的设置方法。
利用盒子的浮动属性完成页面设计。
通过互联网搜索素材，加深对黑龙江旅游产业的了解。

💡 学习准备：浮动与溢出

浮动属性 (float)

值	说明
none	默认值，不浮动
left	向左浮动
right	向右浮动
inherit	继承父元素

溢出属性 (overflow)

值	说明
visible	正常显示（默认）
hidden	隐藏超出部分
scroll	始终显示滚动条
auto	自动判断是否显示滚动条

💡 元素转换与清除浮动

行内与块元素转换： 使用 display: block;, display: inline; 或 display: inline-block;。

清除浮动 (clear)： 使用 clear: both; 可以防止元素被浮动元素环绕，常用于布局底部。

#d2 {
    clear: both; /* 清除两侧浮动 */
}

🍽️ 任务实施：美食推荐

大列巴哈尔滨红肠鸡西冷面烤冷面

🚩 任务3：制作“个人主页”页面

📚 任务要求

熟练掌握定位属性的设置方法。
利用盒定位制作完成“个人主页”。
页面风格要具有个人特色，颜色搭配合理。

💡 学习准备：定位 (Position)

1. 相对定位 (relative)

相对于自己原来的位置进行定位。改变后的位置依然占有原来的空间。

.box {
					    position: relative;
					    top: 15px;
					    left: 15px;
					}

2. 绝对定位 (absolute)

脱离文档流，相对于最近的已定位祖先元素进行定位。若无祖先，则相对于 body。

3. 固定定位 (fixed)

相对于浏览器窗口定位，不随页面滚动而改变。

4. z-index 层叠次序

控制元素的堆叠顺序。值越大越靠前（可为负数）。

#d1 { z-index: 1; }
					#d2 { z-index: -1; }

✨ 课外拓展：静态定位

position: static; 是元素的默认定位方式。在静态定位中，无法通过偏移属性（top, left等）来改变元素位置。

📝 随堂测试

📌 课堂总结

本节课我们系统学习了CSS3布局的核心基石，主要掌握了以下三大核心模块：

盒模型 (Box Model)： 深刻理解了网页元素由内容(content)、内边距(padding)、边框(border)和外边距(margin)组成的结构，掌握了轮廓属性及伪类的用法。
浮动与溢出 (Float & Overflow)： 掌握了利用 float 属性实现多列布局，以及使用 clear 和 overflow 清除浮动带来的塌陷问题。
定位技术 (Position)： 熟练区分了相对定位(relative)、绝对定位(absolute)和固定定位(fixed)的区别，并学会了使用 z-index 控制元素的层叠顺序。

🚀 课后寄语： 盒模型是网页排版的灵魂，浮动与定位是布局的利器。希望同学们在课后多加练习，将理论知识转化为实际的页面开发能力，为后续的响应式布局打下坚实基础！