这是我参与[第五届青训营]伴学笔记创作活动的第7天，继续和大家分享自己学习《理解CSS》章节课程的收获。

一、本堂课重点内容

• CSS盒模型-行级
• CSS盒模型-块级

二、详细知识点介绍

1.块级

• 不和其它盒子并列摆放
• 适用于所有的盒模型属性

（1）块级元素

• 生成块级盒子
• 常见的块级元素：body,article,div,main,section,h1-6,p,ul,li......

（2）块级排版上下文

• 某些容器会创建一个BFC(block formatting context)
• BFC内的排版规则：
• • 盒子从上到下摆放
• • 垂直marin合并
• • BFC内盒子的margin不会与外面的合并
• • BFC不会和浮动元素重叠

2.行级

• 和其它行级盒子一起放在一行或拆开成多行
• 盒模型中的width,height不适用

（1）行级元素

• 生成行级盒子
• 内容分散在多个行级盒子中
• 常见的行级元素：span,em,strong,cite,code......

（2）行级排版上下文

• 只包含行级盒子的容器会创建一个IFC(inline formatting context)
• IFC内的排版规则：
• • 盒子在一行内水平摆放
• • 一行放不下时，换行显示
• • text-align决定一行内盒子的水平对齐
• • vertical-align决定一个盒子在行内的垂直对齐
• • 避开浮动的元素

3.display属性

• block:块级盒子
• inline：行级盒子
• inline-block:本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会拆散成多行
• none:排版时完全被忽略

4.Flex Box是什么

• 一种新的排版上下文，可以控制子级盒子的：摆放的流向、摆放顺序、盒子宽度和高度、水平和垂直方向的对齐、是否允许折行
• 一些属性
• • flex-grow:有剩余空间时的伸展能力
• • flex-shrink:容器空间不足时收缩的能力
• • flex-basis:没有伸展或收缩时的基础长度

5.Grid布局

使元素生成一个块级的Grid容器