**CSS布局核心基础：从盒模型到样式控制**

欢迎来到《Web前端开发第2季：CSS布局》。本课程聚焦于CSS（层叠样式表）的核心机制，旨在帮助学习者彻底理解网页元素的视觉呈现原理，掌握从基础语法到高级选择器的完整技能树，为后续复杂的页面布局打下坚实基础。

课程伊始，我们将带你“初识CSS”，解析其作为网页“妆容”的定义——如何控制HTML的结构化内容呈现为可视化的界面。你将学习CSS的三种引入方式：内联样式、内部样式表和外部样式表，并理解在何种场景下选择最合适的方式，特别是在大型项目中维护外部样式表的必要性。

随后，课程进入“CSS基础知识储备”阶段。这一部分细致梳理了构建页面所需的关键标签与属性。你不仅会复习`div`等容器标签的语义与用法，还将深入探讨CSS的基本语法结构。重点内容包括：如何精确控制容器与字体的大小，如何运用十六进制、RGB及HSL等多种颜色模式；如何设置背景颜色与背景图像以增强视觉层次；以及如何精细调整文字的字体系列、粗细、对齐方式以及段落的行高与间距。此外，列表样式的自定义、链接的状态变化（未访问、已访问、悬停、激活）以及边框的宽度、样式和颜色组合，都是本阶段不可或缺的技能点。

在掌握基础后，课程将深入讲解“CSS选择器”，这是实现精准样式定位的关键。我们将从基本选择器（元素、类、ID）讲起，并通过案例剖析它们之间的优先级规则，解决常见的样式冲突问题。接着，你将学习组合选择器（后代、子元素、相邻兄弟等），实现更灵活的元素定位；探索属性选择器，用于匹配具有特定属性的元素；最后掌握伪类选择器（如`:hover`、`:focus`）和伪元素选择器（如`::before`、`::after`），从而通过纯CSS实现丰富的交互效果与装饰性内容，而无需依赖过多的HTML标签。

课程的重量级部分是“盒子模型”。这是CSS布局的基石。我们将详细拆解盒子的四个组成部分：内容区、内边距、边框和外边距，并通过计算演示盒子在页面中实际占据的空间大小。针对开发者常遇到的布局塌陷与间距异常问题，课程将专门讨论“外边距合并”现象及其解决方案，并引入`box-sizing`属性，帮助你统一盒子的尺寸计算逻辑，避免布局错乱。最后，通过`display`属性（`block`、`inline`、`inline-block`、`none`等）的学习，你将掌握如何彻底改变元素的显示行为，实现元素的纵向堆叠或横向并排，完成从单列到多列布局的初步转换。

通过本课程的学习，你将不再仅仅是“写”样式，而是能够“思考”样式，具备独立规划和实现复杂网页视觉结构的能力。

课程目录

1-1 [初识CSS] 什么是CSS (17:56).mp4
 1-2 [初识CSS] CSS使用的三种方式 (19:58).mp4
 2-1 [CSS基础知识储备] div标签 (11:59).mp4
 2-2 [CSS基础知识储备] CSS基本语法 (13:01).mp4
 2-3 [CSS基础知识储备] 容器和字体大小 (14:46).mp4
 2-4 [CSS基础知识储备] 颜色 (14:25).mp4
 2-5 [CSS基础知识储备] 背景 (23:48).mp4
 2-6 [CSS基础知识储备] 文字 (09:40).mp4
 2-7 [CSS基础知识储备] 段落 (23:21).mp4
 2-8 [CSS基础知识储备] 列表 (07:45).mp4
 2-9 [CSS基础知识储备] 链接 (08:24).mp4
 2-

10 [CSS基础知识储备] 边框 (08:45).mp4
 3-1 [CSS选择器] 基本选择器 (18:42).mp4
 3-2 [CSS选择器] 基本选择器的优先级讨论 (11:50).mp4
 3-3 [CSS选择器] 组合选择器 (21:18).mp4
 3-4 [CSS选择器] 属性选择器 (11:55).mp4
 3-5 [CSS选择器] 伪类选择器 (12:17).mp4
 3-6 [CSS选择器] 伪元素选择器 (14:56).mp4
 3-7 [CSS选择器] 选择器的优先级 (09:01).mp4
 4-1 [盒子模型] 盒子模型的介绍 (16:46).mp4
 4-2 [盒子模型] 盒子模型的值 (18:12).mp4
 4-3 [盒子模型] 盒子模型所占空间 (11:23).mp4
 4-4 [盒子模型] 盒子模型的问题讨论 (05:32).mp4
 4-5 [盒子模型] 纵向排列和横向排列 (12:53).mp4
 4-6 [盒子模型] 演示：多图的横向排列 (14:11).mp4
 4-7 [盒子模型] 外边距的合并 (12:21).mp4
 4-8 [盒子模型] box-sizing属性 (07:37).mp4
 4-9 [盒子模型] display属性 (24:56).mp4
 5-1 [首页布局演示 --- 入门篇] 页面结构的介绍 (10:24).mp4
 5-2 [首页布局演示 --- 入门篇] 标题、大图和页脚 (06:51).mp4
 5-3 [首页布局演示 --- 入门篇] 导航栏 (07:39).mp4
 5-4 [首页布局演示 --- 入门篇] 页面内容 (14:10).mp4
 6-1 [CSS定位] static定位 (17:45).mp4
 6-2 [CSS定位] float格式的清除 (14:17).mp4
 6-3 [CSS定位] absolute定位 (15:38).mp4
 6-4 [CSS定位] relative定位 (16:02).mp4
 6-5 [CSS定位] fixed定位 (06:37).mp4
 6-6 [CSS定位] z-index属性 (06:51).mp4
 7-1 [首页布局演示 --- 进阶篇] 案例的总体介绍 (10:18).mp4
 7-2 [首页布局演示 --- 进阶篇] 顶部导航栏 (27:13).mp4
 7-3 [首页布局演示 --- 进阶篇] 标题栏 (21:13).mp4
 7-4 [首页布局演示 --- 进阶篇] 导航栏 (14:58).mp4
 7-5 [首页布局演示 --- 进阶篇] 首页大图和下拉导航 (22:18).mp4
 7-6 [首页布局演示 --- 进阶篇] 首页新闻 (12:35).mp4
 7-7 [首页布局演示 --- 进阶篇] 内容区域之课程 (32:15).mp4
 7-8 [首页布局演示 --- 进阶篇] 内容区域之标题 (16:04).mp4
 7-9 [首页布局演示 --- 进阶篇] 内容区域之学生必读 (11:52).mp4
 7-

10 [首页布局演示 --- 进阶篇] 页脚 (13:37).mp4
 8-1 [第二季课程总结] CSS布局篇课程总结 (12:45).mp4