视觉格式化模型

视觉格式化模型的基本概念：

视觉格式化模型是一种机制，规定页面中多个盒子的排列，相互影响，最终尺寸及位置。

视觉格式化模型包含了：

视口和包含块。

他是一套非常复杂的机制，包含错综复杂的CSS规范。

核心理念：

在视觉格式化模型中，文档树中的每个元素，都会生成一个或多个盒子，盒子最终尺寸和位置主要受这些因素影响。

盒子的类型与盒子本身的尺寸：

1.display属性决定了盒子的类型，盒模型中四个部分的尺寸，即盒子本身尺寸。

2.盒模型中涉及到的width、height、padding、border等在视觉格式化模型中仅作为参考，并不一定是盒子注重的位置和尺寸。

每个元素都会属于某种定位体系，不同的定位体系会对盒子在页面上的尺寸和位置造成影响。

视口：

浏览器可视窗口（viewport），通常指浏览器可视区域。

视口的大小仅受浏览器可视窗口大小影响。

包含块：

每一个元素都有一个包含块，它是一个区域 一个元素在页面上摆放的区域，通常情况下元素的包含块是它父级元素的内容盒。

初始化包含块：

初始化包含块是浏览器在渲染前自动生成的一块区域，你可以想象成整个页面都是初始化包含块，根元素就是摆放在里面的。