慕课实战 - 前端内功修炼：5大主流布局系统进阶

如果你写页面时经常靠改数字试出来一个"看起来还行"的结果，换个屏幕尺寸就散架，那问题多半不在 CSS 语法，而在布局方案的选择上。这门课围绕前端布局展开，把几种主流布局体系拆开讲，再放进实际页面里跑一遍。它不教你从零学 CSS，而是解决"知道怎么写、但写不出稳定结构"这一段。

它解决的是哪类工作场景

日常最典型的三种情况：一是拿到设计稿，多列、侧边栏、卡片墙混在一起，不确定该用哪种布局方式；二是页面在宽屏正常，到手机或平板上错位、溢出、高度塌陷；三是接手别人的代码，看到一堆嵌套和定位，改一处崩一处。这门课针对的就是这些具体场景，讲清楚每种布局体系各自适合处理什么、边界在哪里，以及它们混用时怎么分工。学完之后，你面对一个页面结构，能先判断用哪套方案，而不是凭手感堆属性。

适合什么基础，先看哪几块

需要你已经能写基本的 HTML 结构和常用 CSS 属性，知道盒模型、display、定位是什么，能独立做出一个静态页面。如果这些还不熟，直接看这门课会有点吃力，建议先把基础过一遍再回来。

看的时候不必按顺序从头刷。建议先看媒体查询相关的内容，把语法、书写位置和先后顺序搞清楚，这是后面所有响应式处理的前提；再看栅格系统那一块，理解列宽和间距是怎么算出来的；最后进入案例部分，跟着把博客头部和辅助列表这类真实结构做一遍。案例是这门课信息密度最高的地方，值得反复看，而不是倍速过一遍就算完。响应式框架那部分偏工具介绍，可以当作查漏补缺来看，不必一开始就投入太多时间。

学完能独立做什么，资料怎么配合练

比较现实的目标是：能独立把一个多区块的页面从桌面端适配到移动端，遇到错位和溢出时知道往哪个方向排查，能读懂并调整别人写的布局代码，而不是只能重写。这不是"学完就能接大厂项目"的程度，但对日常工作里的页面还原和改版需求，够用了。

练习方式建议这样安排：每看完一个布局体系，自己找一个结构相近的页面，不看教程先写一遍，写完再对照案例找差异，重点看结构层级和宽度计算这两处。案例视频不要只跟着敲，先暂停自己写，再播放对照，这样暴露的问题才真实。媒体查询和栅格这两块建议各留一次完整的动手时间，因为它们决定了后面所有适配工作的基础。整套资料更适合当作"边做边查"的参考，而不是一次性看完的视频合集。