笔者在学习该课程后，对课程中的部分知识点进行总结梳理，给出自己的理解与分析，并给予其他同学一些建议
块级和行级（盒）
块级：不能和其他盒子并列（同一行）摆放；适合所有的盒模型属性
行级：和其他行级盒子放在一行或拆开成多行；盒模型中的width、height不适用
块级元素生成块级盒子（body、article、div、main、section、h1-6、p、ul、li等）
行级元素生成行级盒子，内容分散在多个行盒中（span、em、strong、cite、code等）
也可以显示声明：display:block/inline/inline-block（本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行）/none（排版时完全被忽略）
Flex box
一种新的排版上下文
可以控制子级盒子的：摆放流向、摆放顺序、盒子宽度和高度、水平和垂直方向的对齐、是否允许拆行
可以设置子项的弹性：容器有剩余空间时，会伸展；空间不够时，会收缩
flex-grow：有剩余空间时的伸展能力
flex-shrink：空间不足时的收缩能力
flex-basis：没有伸展或收缩时的基础长度
实例分析：
下例中，ABC的基础宽度为固定的100px，A、B两者的flex-grow（分别为2、1，即将剩余空间按照2:1再分配给A、B；
一些简易写法：（详情可查官方文档）
Grid布局
display:grid使元素生成一个块级的grid容器
使用grid-template相关属性将容器划分为网格
设置每一个子项占哪行/列
实例分析：
grid-template-columns表示对列进行划分
grid-template-rows表示对行进行划分
100px 100px 200px：划分为三份，每份固定px值
30% 30% auto：划分为三份，前两份各占30%，auto表示自动填满剩余部分
1fr：表示占剩余部分的一份
指定子项位置：
先将网格线编号为1、2、3……
再指定子项的网格线起始、终止位置
如a块的grid-row-start:1指定行线的起始编号为1，其余同理
也可以简写为grid-area:1/1/3/3
课程总结和建议
本课程在CSS的基础知识上，深入学习CSS的布局方法，如行级排版上下文，flex排版上下文、grid排版上下文等，面向的对象为有CSS基础的同学，入门的同学可以提前学习CSS中的基础概念CSS - 学习 Web 开发 | MDN (mozilla.org)再观看此视频。对于后续CSS的学习，可以充分利用MDN和W3C CSS规范，善用浏览器的开发者工具，持续学习CSS的新特性
部分截图、内容来源于课程
