布局卡壳？这里补齐你的 CSS 短板
很多前端学习者在过渡到页面级开发时，都会遇到同一个拦路虎：盒子放不对位置。文本能居中，元素一复杂就乱套；Flex 很香，但遇到极兼容场景或特定结构时，又不得不回头去查 float、inline-block 的老路子。这门课程不卖弄概念，它直面“为什么我的布局总差那么一点”的痛点。从最基础的布局定义讲起，拆解水平、垂直以及复合居中的四种实现路径，再到多列布局的经典套路。它试图解决的核心问题，是让你在面对不同浏览器环境和尺寸需求时，不再只会套用 Flex，而是拥有一套能灵活切换方案的底气。
先看哪几块？怎么配合练习才不无效
如果你是为了查漏补缺，不要一上来就全剧透。建议优先攻克“居中布局”这一章。课程将水平居中细分为四种方式，垂直居中同样有三到四种解法，这部分的视频时长较长，说明每个案例都经过了足够的推敲。先看懂第一种常规做法，再对比后面的几种差异，比如为什么有的只适合行内元素，有的要求父容器有明确高度。接着再看“多列布局”，两列布局的两种经典实现是 Grid 出现之前的面试常客，理解其中的清除浮动和宽度计算逻辑，对排查老旧项目问题极有帮助。
资料包通常包含对应章节的练习文件，这是关键。看视频时，手不要离开键盘。每学完一种居中方式，立刻关掉视频，在本地环境中从零搭建一个容器，强制自己用刚学的那一种属性去实现，而不是复制粘贴代码。如果练习时卡顿，说明原理还没内化，需要回退重看。不要只追求“看懂了”，要追求“能独立写出来”。多列布局部分尤其适合结合不同的屏幕宽度进行测试，观察不同方案在响应式下的表现差异，这才是从“知道”到“会用”的质变。
学完能做什么？
完成这套课程后，你应该能够独立回答：如何在没有 JavaScript 的情况下，让任意内容在父容器中完美居中？当父容器高度未知时，垂直居中该选哪种方案？在旧版项目中，如何优雅地实现两列或三列布局并处理好浮动带来的塌陷问题？更重要的是，当面试官问你“请列举实现垂直居中的所有方式”时，你能自信地列出至少三种，并说出它们的适用边界。这不是为了应付考试，而是为了在你未来的开发工作中，遇到奇葩布局需求时，脑海里有足够的弹药库供你调用，而不是只能束手无策地依赖别人的代码片段。
课程目录
1-1 [布局是什么] 布局是什么 (16:11) 2-1 [居中布局] 第一种方式实现水平居中布局 (19:35) 2-2 [居中布局] 第二种方式实现水平居中布局 (08:24) 2-3 [居中布局] 第三种方式实现水平居中布局 (14:28) 2-4 [居中布局] 第四种方式实现水平居中布局 (06:08) 2-5 [居中布局] 第一种方式实现垂直居中布局 (17:55) 2-6 [居中布局] 第二种方式实现垂直居中布局 (03:58) 2-7 [居中布局] 第三种方式实现垂直居中布局 (03:27) 2-8 [居中布局] 第一种方式实现居中布局 (05:18) 2-9 [居中布局] 第二种方式实现居中布局 (04:54) 3-1 [多列布局] 第一种方式实现两列布局 (14:42) 3-2 [多列布局] 第二种方式实现两列布局 (36:25) 3-3 [多列布局] 第三种方式实现两列布局 (13:24) 3-4 [多列布局] 第四种方式实现两列布局（上） (17:22) 3-5 [多列布局] 第四种方式实现两列布局（下） (04:30) 3-6 [多列布局] 博客页面的两列布局案例 (42:25) 3-7 [多列布局] 第一种方式实现三列布局 (06:36) 3-8 [多列布局] 第二种方式实现三列布局 (15:59) 3-9 [多列布局] 第三种方式实现三列布局（上） (28:23) 3-10 [多列布局] 第三种方式实现三列布局（下） (27:45) 3-11 [多列布局] 双飞翼布局 (12:14) 3-12 [多列布局] 圣杯布局 (11:15) 3-13 [多列布局] 第一种方式实现等分布局 (05:55) 3-14 [多列布局] 第二种方式实现等分布局 (05:46) 3-15 [多列布局] 第三种方式实现等分布局（上） (13:18) 3-16 [多列布局] 第三种方式实现等分布局（下） (12:16) 3-17 [多列布局] 第四种方式实现等分布局 (18:18) 3-18 [多列布局] 等高布局 (05:49) 3-19 [多列布局] 第一种方式实现等高布局 (05:17) 3-20 [多列布局] 第二种方式实现等高布局 (05:31) 4-1 [CSS3的多列布局] CSS3的多列布局 (13:56) 5-1 [全屏布局] 全屏布局 (25:26)
