这是我参与「第五届青训营 」伴学笔记创作活动的第 7 天 本节课主要是学习dom的排版方式，包括常规流、行级块级排版上下文、flex和grid布局，以及浮动和定位，老师讲解的比较细致，当然css也不只这些内容，其他的需要我们自己去探索。
常规流
- 根元素、浮动和决对定位的元素会脱离常规流
- 其他元素都在常规流之内
- 常规流中的盒子，在某种排版上下文中参与布局
行级排版上下文
- IFC（Inline Formatting Context）
- 只包含行级盒子的容器会创建一个IFC
- IFC内的排版规则
- 盒子在一行内水平摆放
- 一行放不下时，换行显示
- text-align决定一行内盒子的水平对齐
- Vertical-align决定一个盒子在行内的垂直对齐
- 避开浮动float元素
块级排版上下文
- BFC（Block Formatting Context）
- 某些容器会创建一个BFC
- 根元素
- 浮动、绝对定位、inline-block
- flex子项和Grid子项
- overflow值不是visible的块盒
- Display: flow-root
BFC内的排版规则
- 盒子从上到下摆放
- 垂直margin合并
- BFC内盒子的margin不会与外面的合并
- BFC不会和浮动元素重叠
Flex Box
- 一种新的排版上下文
- 它可以控制子级盒子的：
- 摆放的流向（上、下、左、右）
- 摆放顺序
- 盒子高度和宽度
- 水平和垂直方向的对齐
- 是否允许折行
主轴和垂直于主轴的交叉轴构成
包括：
- justify-content
- align-items
- align-self
- order
- flexibility
- flex-grow 有剩余空间时的伸展能力
- flex-shrink 容器空间不足时收缩的能力
- Flex-basis 没有伸展或收缩时的基础长度
Grid布局
声明display:grid
使用grid-template的属性将容器划分为网格
float浮动
定义：非IE浏览器下，容器不设高度且子元素浮动时，容器高度不能被内容撑开。 此时，内容会溢出到容器外面而影响布局。这种现象被称为浮动
浮动的工作原理：
- 浮动元素脱离文档流，不占据空间（引起“高度塌陷”现象）
- 浮动元素碰到包含它的边框或者其他浮动元素的边框停留
清除浮动的方式：
- 给父级div定义height属性
- 最后一个浮动元素之后添加一个空的div标签，并添加clear:both样式
- 包含浮动元素的父级标签添加overflow:hidden或者overflow:auto
- 使用 :after 伪元素。由于IE6-7不支持 :after，使用 zoom:1 触发 hasLayout
position定位
| 属性 | 含义 |
|---|---|
| static | 默认值，非定位元素 |
| relative | 相对于自身原本位置偏移，不脱离文档流 |
| absolute | 绝对定位，相对非static祖先元素定位 |
| fixed | 相对于视口绝对定位 |
