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

原文

  简书原文: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、 外部信息

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

上一篇:CSS概念 - 可视化格式模型(二) 定位概述(普通流、绝对定位)


下一篇:CSS概念 - 可视化格式模型(一) 盒模型与外边距叠加