视觉格式化模型

简介

下面主要讲了用户代理如何获取文档树，并为可视媒体处理和显示他.
1 .在可视化格式化模型中，文档书中的每个元素根据盒子模型生成多个盒子，这些盒子的布局受到一下约束

1 .盒子尺寸和类型
2 .定位方案：正常流动，浮动，绝对定位
3 .文档树中元素之间的关系
4 .外部信息，视口大小，图像的内在尺寸

视口的作用

1 .视口是浏览器窗口的查看区域。
2 .当视口大小改变时，用户代理可以改变页面的布局。调整窗口大小，改变移动设备的方向
3 .如果视口小于文档的大小，用户代理需要提供一种方法来滚动到文档中未显示的部分。

盒子生成

1 .盒子是从文档的元素创建而来，根据display值的不同，生成不同的盒子
2 .当一个元素生成一个或多个盒子时，其中一个是主盒子，他包含了后代盒子和盒子树中生成的内容.
3 .一些元素会生成除了主框之外的其他框，display:list-item生成多个框，用来装*,1
4 .

匿名框

1 .当没有用于该框的html元素时，将会生成一个匿名框。当在父元素上声明一个display:flex时
2 .当文本和块元素穿插的时候，也会发生这个

<div class="example">
I am wrapped in an anonymous box 
<p>I am in the paragraph</p>
I am wrapped in an anonymous box.
</div>
//字符串在盒子中被分成三个部分，段落之前的字符串都被包裹在一个匿名盒子中，然后我们有p,生成一个盒子，然后是另一个匿名盒子

3 .这些匿名框会直接继承父级样式，我们是无法通过定位匿名框来更改他们的外观的。
4 .

独立的格式化上下文

1 .是页面一块独立的渲染区域，可以理解为页面上有一个盒子，盒子里面的元素渲染有一套自己的规则，BFC内部元素不会影响外部元素
2 .BFC触发条件

image.png

3 .使用场景，避免margin重叠，清除浮动，自适应两栏布局