可视化格式模型(visual formatting model)

Posted 2020-12-04 shcrk

原文

　　简书原文：https://www.jianshu.com/p/7632f16ff555

大纲

　　1、认识可视化模型
　　2、可视化模型的内容
　　3、可视化模型的影响因素

1、认识可视化模型

　　盒子模型是CSS中所有元素产生的box的自身构成，而可视化格式模型则是把这些box，按照规则摆放到页面上，也就是通常所说的布局。换句话说，可视化格式模型是整个页面的模型，这个模型规定了怎么在页面里摆放box，box相互作用等等。属于CSS的最为核心的概念之一。
　　可视化格式模型，官方的说法是，它规定了用户端在媒介中如何处理文档树(document tree)。
　　　　● 用户端，对我们来说一般指浏览器。
　　　　● 媒介，相当于我们展现页面的介质。如，纸媒介，听觉浏览器和显示器等。
　　　　● 文档树(document tree)是指源文档中元素树的编码。树中，每一个元素恰好由一个父元素。根元素是例外，它没有父元素。就是document和页面上的元素所构成的类似树形的结构。

2、可视化模型的内容

　　网页布局根据可视化格式模型来进行布局，而影响可视化格式模型的大致有几个方面，外部环境，box模型，定位机制，文档树。
　　　　1、外部环境指的是设备，窗口等外设信息
　　　　2、文档树指的是各个元素在文档树中的位置从而影响网页排版
　　　　3、box模型讲述的是网页上的各个元素以盒子的形式在网页上布局，但是是以怎样的盒子在网页上布局是根据各种不同的情况而定的
　　　　4、定位机制讲述的是如何将各个不同的盒子按照需求排列到网页上

　　网页布局本质上就是讲各个html元素盒子在网页上按照不同的定位机制进行排版定位。
　　块框( block boxes )和行内框( inline boxes )只是三种定位体系之一的常规流( Normal flow )，而块级格式上下文（Block Formatting Context）和行内格式上下文( inline formatting )只是他们的元素创建的格式上下文，他们本身其实并不是上下文，是对内框的排列的一种约束。

3、可视化模型的影响因素

　　在可视化格式模型中，每一个元素都会根据盒子模型产生0个或多个box，而这些box的布局受以下因素的影响：

3.1、box尺寸和类型

　　类型是指 display 特性所决定的元素类型，如：DIV 是块级元素，SPAN 是行内元素等。

3.2、定位体系

　　元素在布局时，根据3种定位体系定位。分别是，常规流、浮动和绝对定位。这3种定位体系的详细内容会在后面讲到。

3.3、 在文档树中，元素之间的关系

　　比如，一个块元素包含两个互为兄弟节点的浮动元素，后面那个浮动元素的布局，会受前面元素以及它包含块的影响。

3.4、 外部信息

　　比如，可视窗口的大小，我们有时候会做页面自适应窗口大小的功能，就是因为，窗口大小对布局有影响。再如，图片的固有尺寸，会影响行内替换元素的尺寸，进而影响这个布局。