CSS | 视觉格式化模型(Visual formatting model)

视觉格式化模型的简介

• 可视化格式模型(Visual formatting model)，即浏览器处理DOM树的方式。

布局

DOM树由若干盒子组成，这些盒子的布局受如下几点因素控制:

1. 盒类型与显示属性（display：block,inline,inline-block,flex,etc.）
2. 盒模型尺寸（width,height,padding,border,margin）
3. 定位方式（normal flow, float, and absolute）
4. 格式化上下文（BFC,IFC,GFC,FFC）
5. 元素间关系（父子，兄弟等）
6. 额外信息（viewport，置换元素如图片的实际尺寸等）

 接下来，将分篇幅解析这些控制因素。

1.盒类型与显示属性

1. 盒类型与显示属性

2.盒模型尺寸

1. 盒模型的宽度计算规则
2. 盒模型的高度计算规则
3. 相对定位下，盒偏移量的计算规则
4. margin与padding 百分比

3.定位方式

1. 定位方式

4.格式化上下文

1. 块格式化上下文(BFC)
2. 行内格式化上下文(IFC)