这是我参与「第五届青训营 」笔记创作活动的第4天
今天的[深入CSS（下）]视频课，主要围绕盒模型中行“行级”与“块级”这两种常见的布局结构展开，讲解其基本定义、各自特征、工作属性和排版规则，提供业内操作思路，帮助我们强化 CSS 实战技能。
我对今天的知识进行了整理，内容如下：
1. CSS盒模型-行级
行级（inline level box），它和其它行级盒子一起放在一行或拆开成多行，盒模型中的width，height属性不会生效。span、em、strong、cite、code等都是行级元素，当然也可以使用dispaly：inline把其他的变成行级元素。
2.CSS盒模型-块级
块级（block level box），不和其他盒子并列摆放，元素的所有属性都适用。像body、div、section、h1-6、p、ul等都是块级标签。同样可以使用dispaly：block把其他的变成行级元素。
有一个属性display可以改变元素的排列方式，它有多个属性，如下：
- block - 块级盒子
- inline - 行级盒子
- inli-block - 本身是行级，可以放在行盒中，可以设置宽高，作为一个整体不会被拆成多行。
- none - 排版时完全被忽略，隐藏元素。
前一天我们讲了布局主要分为三大类：标准流，浮动，定位。
标准流里面排版又主要包括几部分，如下：
下面我们对每个方式进行分析：
- 行级排版上下文，主要就是盒子在一行内水平摆放，一行放不下就换行显示，text-align可以让盒子水平对齐。例子：
2.块级排版上下文，体现在浮动、绝对定位、inline-block等上面。盒子不会在一行上显示，会独占一行。例子：
3.flex弹性布局
flex是一种新的排版方式，它可以控制子级盒子的摆放流向，摆放顺序，盒子的宽高，水平和垂直反向的对齐等等。flex有主轴与侧轴，默认下水平方向为主轴，垂直向下为侧轴。
- justify-content属性可以控制子元素在主轴上的排列方式，如：
- align-items属性可以控制子元素在侧轴上的排列方式，如：
4.grid网格布局
使用display：grid可以是元素生成一个块级的grid容器，如下：
grid还有许多属性，我举几个常见的，如果有感兴趣的可以点击这里查看。
- grid-template将容器划分为网格，例子：
2.gird line网格线，让子元素具体位置实现，例子：
