这是我参与「第四届青训营 」笔记创作活动的的第4天
块级盒子和行级盒子
元素和盒模型的关系
我们需要重点关注
display属性！它设置了盒子的展现方式。
常规流
它决定了元素的布局方式，是最基本的布局模式。
- 常规流布局方式：将窗体自上而下分成一行一行，块级元素从上至下、 行内元素在每行中按从左至右的依次排放元素。
- 常规流包括：
- 行级排版上下文
- 块级排版上下文
- Table排版上下文
- Flex排版上下文
- Grid排版上下文
行级排版上下文规范
块级排版上下文规范
遵循BFC规则
Flex排版上下文（弹性布局）
使用
Flex布局的的元素被称为Flex容器。是当前网页布局用的最多的布局方式之一。
- 容器默认存在两根轴，分别是主轴与侧轴。
Flex-direction是决定主轴方向的属性。
它的四种值的情况如下图所示：
justify-content属性决定了容器内元素的对齐方式。
注意：是沿主轴的对齐方式。
其中：
space-between表示两端对齐。space-around表示每个元素两侧的间隔相等。如图：
space-evenly表示每个间隔都相等。如图：
align-items决定了元素沿侧轴方向的对齐方式
如图：
baseline表示元素内第一行文字的基线对齐
align-self表示改变单个元素的对齐方式。
当值是auto或不写这一属性时，默认继承align-items对齐方式。
order决定了元素的排列顺序
数值越小，排列越靠前。
Flexibility
flex-grow
当容器的宽度减去C盒子的宽度后，以2:1的方式分给A和B
flex-shrinkflex容器空间不足时候，单个元素的收缩比例。默认值都是1，并且不支持负值。当值为0时，表示不收缩。
举例：假设空间不足，当一个元素值为0，其它不为零时，其他元素都按比例缩小，这一个元素保持不变。
flex-basis元素未伸展前，占据的主轴空间。浏览器会根据这一属性计算容器剩余的宽度。默认值auto是占满容器。
flex简写形式
flex按顺序包含了flex-grow、flex-shrink、flex-basis三种属性。
当只填一个或两个值时会表示以下情况：
Grid布局
网格布局，是一种二维形式的布局。通过行、列二维方式将元素安排到网格中，来实现布局的目的。
使用方式
- 生成一个Grid容器
- 划分网格
columns表示有几列，rows表示行。
-
-
auto表示剩余自动填充宽度或高度。百分数是相对于容器来说的。 -
fr表示剩余空间按比例分配。
- 设置子项位置。
Grid表格坐标
有四个属性来定位区域：grid-columns-start、grid-columns-end、grid-row-start、grid-row-end。分别是列的起始和行的起始。
有三种定位区域的方式：
- 用上面的四个属性。
2.
grid-column、grid-row，分别是列的起始和行的起始，表示方式如图:
3.
grid-area，按照顺序有四个值，分别也是列的起始和行的起始。如图：
小结
认识了常规流的四种排版布局方式。
尾声
以上包含部分个人观点，如有技术错误，敬请提出。
