这是我参与「第四届青训营」笔记创作活动的的第3天！
本期重新打卡学习CSS进阶（二）部分，进行查漏补缺
布局相关技术
布局分为：① 常规流 ② 浮动 ③ 绝对定位
常规流：行级、块级、表格布局、FlexBox、GridBox
一些场景：
① 默认情况下盒子为content-box（即width和height只代表content的高度），通常我们会设置成border-box
② margin使用auto值得时候，浏览器会对剩余部分进行平分 ③ margin collapse 会出现边距合并问题（高度塌陷）
IFC - Inline Formatting Context
- 只包含行级盒子的容器会创建一个IFC
- 盒子在一行内水平摆放
- 一行放不下时，会进行换行显示
- text-align会决定一个盒子在行内的垂直对齐
- 避开浮动元素
BFC - Block Formatting Context
- 会创建BFC的情况：1. 根元素 2. 浮动、绝对定位、inline-block 3. Flex子项和Grid子项 4. overflow值不是visible的块盒 5. display: flow-root;
- 盒子从上到下摆放
- 垂直的margin会被合并
- BFC内盒子不会与外面的合并
- BFC不会与浮动元素重叠
Flex Box
- 一种新的排版上下文
- 可以控制子级盒子的：1. 摆放方向 2. 摆放顺序 3. 盒子宽度高度 4. 水平和垂直方向的对齐 5. 是否运行折行
常见的flex布局场景有：
方向：flex-direction: row | row-reverse | column | column-reverse;
主轴：justify-content: flex-start | flex-end | center | space-between | space-arount | space-evenly;
交叉轴：align-items: flex-start | flex-end | center | stretch（默认就是填充满） | baseline;
单个项目：align-self: auto | flex-start | flex-end | center | baseline | stretch;
顺序：order: number;（越大越靠后）
Flexibility：flex-grow:有剩余空间时的伸展能力, flex-shrink:容器空间不足时收缩的能力, flex-basis:没有伸展或收缩时的基础长度;
Grid Box
- display: grid 使元素生成一个块级的 Grid 容器
- 使用 grid-template 相关属性将容器划分为网格
- 设置每一个子项占哪些行/列
float布局
应用场景逐渐变少
position属性
- static 默认值，非定位元素
- relative 相对于原本位置偏移，不脱离文档流
- absolute 绝对定位，相对非static祖先元素定位，
脱离常规流 - fixed 相对于视口绝对定位
- sticky 粘性定位，在视口内时为相对定位，超出视口则为fixed定位
