别让“会写样式”变成“页面全乱”
很多转岗或自学前端的人，HTML 标签背得很熟，一到写页面就懵：元素挤成一团、宽高不受控制、颜色死活出不来、改一个样式牵连整个页面。这门 CSS 布局基础课解决的就是这个断层——从“能敲出标签”到“能用 CSS 控制元素在屏幕上的位置和长相”。它不教花哨的动画和工程化框架，只补最底层的样式逻辑：盒模型怎么算、选择器优先级谁压谁、容器和文字尺寸怎么定。如果你连 div 嵌套都理不清，或者写样式全靠复制粘贴碰运气，这部分就是给你填坑的。建议基础薄弱者直接从“初识 CSS”和“基础知识储备”两块看起，别跳过语法和颜色背景这些看似简单的环节，漏一个规则后面布局全崩。
选择器优先级和文本排版是练习重点
看懂语法不等于会写，CSS 的坑全在细节冲突里。重点啃“CSS 选择器”这一块，特别是基本选择器的优先级讨论——这是初学者最容易踩雷的地方，比如同时用了标签选择器和类选择器，最后页面渲染的样式跟你想的完全不一样。配套练习建议这样安排：看完容器、字体、段落、列表、链接这几节，立刻新建一个空白 HTML 文件，手写一个包含标题、正文段落、超链接列表的简单文章页。不要用现成框架，纯手敲 CSS 去控制背景色、文字大小、边框样式和链接的伪类状态。资料里的代码片段只当参照，重点是自己在编辑器里把样式撞墙、再调通的过程走一遍。边写边验证：改一个选择器，看页面元素到底听谁的。
学完能独立搭什么、能回答什么
把这几个模块吃透，你应该能独立干这件事：拿到一张简单的静态图文原型图，不依赖任何 UI 库，纯用原生 CSS 把页面元素的排版、配色、边框、字体大小还原出来，并且能解释清楚每一行样式规则为什么这么写。具体到自查标准，看完后试着脱稿回答这几个问题：CSS 三种引入方式的区别和适用场景是什么？多个选择器同时作用在一个元素上时，浏览器按什么规则决定最终生效的样式？div 作为容器，它的宽高、背景、边框属性如何影响内部文字和相邻元素的布局？如果你对着这几个问题卡壳，说明优先级和盒模型基础还没真正消化，回头把对应章节的练习再敲一遍。别急着进阶到浮动和弹性布局，地基没打牢，后面写响应式全是抄来的死代码。
课程目录
1-1 [初识CSS] 什么是CSS (17:56) 1-2 [初识CSS] CSS使用的三种方式 (19:58) 2-1 [CSS基础知识储备] div标签 (11:59) 2-2 [CSS基础知识储备] CSS基本语法 (13:01) 2-3 [CSS基础知识储备] 容器和字体大小 (14:46) 2-4 [CSS基础知识储备] 颜色 (14:25) 2-5 [CSS基础知识储备] 背景 (23:48) 2-6 [CSS基础知识储备] 文字 (09:40) 2-7 [CSS基础知识储备] 段落 (23:21) 2-8 [CSS基础知识储备] 列表 (07:45) 2-9 [CSS基础知识储备] 链接 (08:24) 2-10 [CSS基础知识储备] 边框 (08:45) 3-1 [CSS选择器] 基本选择器 (18:42) 3-2 [CSS选择器] 基本选择器的优先级讨论 (11:50) 3-3 [CSS选择器] 组合选择器 (21:18) 3-4 [CSS选择器] 属性选择器 (11:55) 3-5 [CSS选择器] 伪类选择器 (12:17) 3-6 [CSS选择器] 伪元素选择器 (14:56) 3-7 [CSS选择器] 选择器的优先级 (09:01) 4-1 [盒子模型] 盒子模型的介绍 (16:46) 4-2 [盒子模型] 盒子模型的值 (18:12) 4-3 [盒子模型] 盒子模型所占空间 (11:23) 4-4 [盒子模型] 盒子模型的问题讨论 (05:32) 4-5 [盒子模型] 纵向排列和横向排列 (12:53) 4-6 [盒子模型] 演示：多图的横向排列 (14:11) 4-7 [盒子模型] 外边距的合并 (12:21) 4-8 [盒子模型] box-sizing属性 (07:37) 4-9 [盒子模型] display属性 (24:56) 5-1 [首页布局演示 --- 入门篇] 页面结构的介绍 (10:24) 5-2 [首页布局演示 --- 入门篇] 标题、大图和页脚 (06:51) 5-3 [首页布局演示 --- 入门篇] 导航栏 (07:39) 5-4 [首页布局演示 --- 入门篇] 页面内容 (14:10) 6-1 [CSS定位] static定位 (17:45) 6-2 [CSS定位] float格式的清除 (14:17) 6-3 [CSS定位] absolute定位 (15:38) 6-4 [CSS定位] relative定位 (16:02) 6-5 [CSS定位] fixed定位 (06:37) 6-6 [CSS定位] z-index属性 (06:51) 7-1 [首页布局演示 --- 进阶篇] 案例的总体介绍 (10:18) 7-2 [首页布局演示 --- 进阶篇] 顶部导航栏 (27:13) 7-3 [首页布局演示 --- 进阶篇] 标题栏 (21:13) 7-4 [首页布局演示 --- 进阶篇] 导航栏 (14:58) 7-5 [首页布局演示 --- 进阶篇] 首页大图和下拉导航 (22:18) 7-6 [首页布局演示 --- 进阶篇] 首页新闻 (12:35) 7-7 [首页布局演示 --- 进阶篇] 内容区域之课程 (32:15) 7-8 [首页布局演示 --- 进阶篇] 内容区域之标题 (16:04) 7-9 [首页布局演示 --- 进阶篇] 内容区域之学生必读 (11:52) 7-10 [首页布局演示 --- 进阶篇] 页脚 (13:37) 8-1 [第二季课程总结] CSS布局篇课程总结 (12:45)
