块级vs行级

1.块级

• Block Level Box
• 不和其他盒子并列拜访
• 适用所有的盒模型属性
• 块级元素
• 生成块级盒子
• body,article,div,main,section,h1-6,p,ul,li等
• display:block

2.行级

• Liline Level Box
• 和其他行级盒子一起放在一行或拆开成多行
• 盒模型中的width、height不适用
• 行级元素
• 生成行级盒子
• 内容分散在多个行盒中
• span,em,strong,cite,code等
• display:inline

display属性

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

行级排版上下文

• Lnline Formatting Context（IFC）
• 只包含行级盒子的容器会创建一个IFC
• IFC内的排版规则
• 1.盒子在一行内水平摆放
• 2.一行放不下时，换行显示
• 3.rext-align决定一行内盒子的水平对齐
• 4.vertical-align决定一个盒子在和行内的垂直对齐
• 5.避开浮动元素

BFC内的排版规则

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

块级排版上下文

• Block Formatting Context（BFC）
• 某些容器会创建一个BFC
• 1.根元素
• 2.浮动、绝对定位、inline-block
• 3.Flex子项和Grid子项
• 4.overflow值不是visible的块盒
• 5.display：flow-root