CSS3实战

缺什么补什么：别拿 div 一把梭应付排版

这门课解决的核心问题很明确：页面写出来后，元素位置总是乱跑、高度塌陷、垂直居中靠玄学、响应式只能抄模板。很多转岗或自学的同学，能写出标签和样式，却对盒模型、文档流、定位上下文、flex 主轴交叉轴这些底层规则一知半解，改一个边距就全盘崩盘。如果你现在还在用 float 布局，或者写 flexbox 只会无脑加 justify-content: center，遇到复杂导航和等高卡片就卡壳，那说明你的 CSS 排版体系是有缺口的，这门课就是来补这个缺口。它不跟你扯什么高深架构，而是把从盒模型、文档流到传统经典布局，再到 flex 弹性布局和响应式媒体查询的底层逻辑，通过真实页面还原掰碎了讲清楚。

怎么看：先补底层规则，再死磕布局练习

考虑到这门课带有明显的实战练习属性，建议你按能力缺口分块突击，而不是按顺序漫无目的地刷。第一块是底层规则，优先看盒模型、行内元素与 box-sizing、定位与垂直居中这几节。别觉得简单，很多老手对 border-box 到底改变了什么、绝对定位到底相对于谁，依然说不清楚。看这部分时，重点对照自己以前踩过的坑，把文档流的脱离规则彻底搞透。第二块是布局重头戏，包括传统布局练习、圣杯与双飞翼实例，以及 flex 的基础与进阶。这里建议你先别看视频里的成品代码，自己拿张纸画一下结构，试着用 float 实现一次圣杯布局，再换成 flex 去实现一次双飞翼，带着报错和卡壳点去对照视频，你才会知道讲师为什么要用那些负边距和 padding 留白。第三块是视觉表现与兼容，背景、媒体查询、字体文本、过渡动画与 2D/3D 变换，这块适合快速过一遍，重点放在媒体查询的断点逻辑和动画的时间曲线上，至于最后那几分钟照顾 IE 的内容，了解即可，别浪费时间纠结。

配套怎么练：看完能独立做什么

资料包里的代码和视频必须配合着用，千万别只看不练。正确的用法是：先看一遍布局练习和实例解析的讲解，理解思路后，关掉视频，只看着资料包里给的视觉稿，自己从零把 HTML 结构和 CSS 写出来。遇到写不下去的地方，再去翻对应的代码片段找原因。课程里专门安排了用 flex 实现计算器和产品布局的练习，这就是检验你是否真正理解主轴换行与交叉轴对齐的试金石。学完这门课，你应该能独立做到：拿到一张任意层级的 PC 端网页设计图，能迅速在脑子里拆分出头部、主体、侧边栏的布局方案，熟练用 flex 或经典布局写出骨架；遇到移动端适配需求，能合理用媒体查询写出响应式断点；需要加交互反馈时，能用过渡和 2D 变换写出平滑的悬停动效，而不是去硬塞一堆图片。把这些练习踏踏实实敲一遍，你的 CSS 才算真正落地，而不是看懂了却写不出。