CSS视觉格式化模型

1.CSS 视觉格式化模型

CSS 视觉格式化模型是用来处理在视觉媒体上显示文档时使用的计算规则。

视觉格式化模型会根据CSS盒子模型将文档中的元素转换为一个个盒子，每个盒子的布局由以下因素决定：
1.盒子的尺寸：精确指定、由约束条件指定或没有指定
2.盒子的类型：行内盒子（inline）、行内级盒子（inline-level）、原子行内级盒子（atomic inline-level）、块盒子（block）
3.定位方案（positioning scheme）：普通流定位、浮动定位或绝对定位
4.文档树中的其它元素：即当前盒子的子元素或兄弟元素
5.视口尺寸与位置
6.所包含的图片的尺寸
7.其他的某些外部因素

该模型会根据盒子的包含块（containing block）的边界来渲染盒子。通常，盒子会创建一个包含其后代元素的包含块，但是盒子并不由包含块所限制，当盒子的布局跑到包含块的外面时称为溢出（overflow）。

参考文章：https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Visual_formatting_model

2.CSS基础盒模型

当对一个文档进行布局（lay out）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS bas