布局
常规流布局 任意盒子在布局中的表现：
- 外部显示类型：规定了该盒子如何与同一格式上下文中的其他元素一起显示
- 块级盒子 display：block | flex | grid | table | flow-root 参与块级格式化上下文 BFC
- 内联级盒子：display：inline | inline-block | inline-flex | inline-grid 参与内联级格式上下文 IFC
- 内部显示类型：规定了该盒子内部的布局方式
外边距塌陷 产生外边距塌陷的情况：
- 两个兄弟元素之间的相邻上下外边距
- 父子元素之间相邻的上下外边距
- 内容为空元素自己上下外边距相邻 消除外边距塌陷的方法：
- 在两个相邻的上下外边距间增加border、padding或者内联元素使之不相邻
- 父子元素重叠时，还可以设置父元素为BFC，使得父子不在同级BFC
Flexbox布局
子元素按照主轴线（main axis）排列，垂直于主轴的是副轴（cross axis）
作用于父元素
- 建立一个弹性盒 display：flex | inline-flex
- 规定盒子的主轴方向 flex-direction：row | column
- 主轴方向子元素排列方式： justify-content： center | space-between
- 副轴方向子元素排列方式：align-content：flex-start | space-between
- 副轴方向子元素对齐方式：align-items：flex-start | center | stretch
作用于子元素
- 规定item未放缩之前的默认大小 flex-basis：auto | 长度值
- 有剩余空间时，对item的分配比例 flex-grow：number
- 规定空间不够时，对item的压缩比例 flex-shrink：number
grid布局
作用于父元素
- 使用grid布局 display：grid | inline-grid
- 生成显示的列、行 grid-template-columns/rows
作用于子元素 规定占有的列、行 grid-column/row
| Flex | Grid |
|---|---|
| 一维布局 | 二维布局 |
| 基于内容 | 基于布局 |
| 浏览器兼容性更好 | 2017年后浏览器的版本普遍支持 |
| 小面积或组件中以及Grid Item中适用 | 大面积或整体布局适用 |
总结
本文是CSS课程第二部分，主要是对布局的整理和总结
