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. 盒模型的高度计算规则