一、块级 VS 行级

A.区别

Block Level Box	Inline Level Box
不和其他盒子并列摆放	和其他行级盒子一起放在一行or拆开成多行
适用所有的盒模型属性	和模型中的width、height不适用

B.基本定义

块级元素	行级元素
生成块级盒子	①生成行级盒子②内容分散在多个行盒（line box）中
body,article,div,main,section,h1-6,p,ul,li等	sapn,em,strong,cite,code等
display:block	display:inline

二、display属性

block	块级盒子
inline	行级盒子
inline-block	本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行
none	排版时完全被忽略

三、常规流Normal Flow

A.基本定义

1. 根元素、浮动和绝对定位的元素会脱离常规流

2. 其他元素都在常规流之内（in-flow）

3. 常规流中的盒子，在某种排版上下文中参与布局

   1. 

B.行级排版上下文

1. Inline Formatting Context(IFC)

2. 只包含行级盒子的容器会创建一个IFC

3. IFC内的排版规则

   1. 盒子在一行内水平摆放
   2. 一行放不下时，换行显示
   3. text-align决定一行内盒子的水平对齐
   4. vertical-align决定一个盒子在行内的垂直对齐
   5. 避开浮动（float）元素

C.块级排版上下文

1. Block Formatting Context(BFC)

2. 某些容器会常见一个BFC

   1. 根元素
   2. 浮动、绝对定位、inline-block
   3. Flex子项和Grid子项
   4. overflow值不是visible的块盒
   5. display:flow-root;

3. BFC内的排版规则

   1. 盒子从上到下摆放
   2. 垂直margin合并
   3. BFC内盒子的margin不会与外面的合并
   4. BFC不会和浮动元素重叠

D.Flow Box定义

1. 一种新的排版上下文

2. 它可以控制子级盒子

   1. 摆放的流向

   2. 摆放顺序

   3. 盒子宽度和高度

   4. 水平和垂直方向的对齐

   5. 是否允许折行

四、position属性

static	默认值，非定位元素
relative	相对自身原本位置偏移，不脱离文档流
absolute	绝对定位，相对非static祖先元素定位
fixed	相对于视口绝对定位

A.position:relative

1. 在常规流里面布局
2. 相对于自己本应该在的位置偏移
3. 使用top、left、bottom、right设置偏移长度
4. 流内其他元素当它没有偏移一样布局

B.position:absolute

1. 脱离常规流
2. 相对于最近的非static祖先定位
3. 不会对流内元素布局造成影响