视觉格式化模型(Visual formatting model)

时间 2019-11-10

标签视觉格式化模型 visual formatting model 栏目快乐工作繁體版

原文原文链接

在可视化格式模型(Visual formatting model)当中,文档树中的每一个元素根据其盒模型生成0个或多个盒.这些盒的布局由(如下因素)控制:css

盒尺寸与类型html
定位模式(常规流,浮动与绝对定位)segmentfault
文档树中元素间的关系dom
外部信息(例如,视口大小,内含图片的固定尺寸等等)ide

包含块(containing blocks)

在 CSS2.1 中，不少框的定位和尺寸的计算，都取决于一个矩形的边界，这个矩形，被称做是包含块( containing block )。通常来讲，(元素)生成的框会扮演它子孙元素包含块的角色；咱们称之为：一个(元素的)框为它的子孙节点建造了包含块。包含块是一个相对的概念。布局

绝对定位元素的包含块

若是其祖先元素是行内元素,则包含块取决于其祖先元素的direction特性ui

若是direction是ltr,包含块的顶,左边是祖先元素生成的第一个框的顶、左内边距边界(padding edges),右、下边是祖先元素生成的最后一个框的右,下内边距边界(padding edges)atom
包含块的宽度多是负的spa
若是direction是rtl,包含块的顶、右边是祖先元素生成的的第一个框的顶、右内边距边界(padding edges),左、下边是祖先元素生成的最后一个框的左、下内边距边界(padding edges).net
其余状况下，若是祖先元素不是行内元素，那么包含块的区域应该是祖先元素(absolute、relative 或者 fixed)的内边界

KB008: 包含块( Containing block )

视口(viewport)

连续媒体的用户代理通常会给用户提供一个视口（屏幕上的一个窗口或者视图区域），用户经过它来查阅文档。视口尺寸变化（见初始包含块）时，用户代理可能会改变文档的布局

当视口比渲染文档的画布区域小时，用户代理应该提供一种滚动机制。一个画布最多对应一个视口，但用户代理可能会渲染到多个画布上（即提供同一文档的不一样视图）

盒的生成(Box generation)

CSS视觉格式化模型的一部分工做是从文档元素生成盒.生成的盒拥有不一样类型,并对视觉格式化模型的处理产生影响.生成盒的类型取决于CSS属性display

块级元素(Block-level elements)

当元素的CSS属性display为block,list-item或table时,它就是块级元素
块级元素视觉上呈现为块,竖直排列

块级盒(block-level box)

块级盒用于描述他与父元素和兄弟元素之间的表现
块级盒参与块格式化上下文(block formatting context)
每一个块级元素至少生成一个块级盒,称为主要块级盒(principal block-level box).一些元素,好比<li>,生成额外的盒赖放置项目符号,不过多数元素只生成一个主要块级盒
主要块级盒将包含后代元素生成的盒以及生成的内容
主要块级盒是可使用定位方案(position scheme)的盒

块容器盒(block container box)

块容器盒描述跟它后代之间的影响
一个块级盒也多是块容器盒
块容器盒(block container box)只包含其它块级盒,或生成一个行内格式化上下文(inline formatting context),由此只包含行内盒
有些块级盒,好比表格,可替换元素不是块容器盒.相反,一些块容器盒.好比非替换行内块及非替换表格单元格,不是块级盒
同时块容器盒的块级盒称为块盒(block boxes)

匿名块盒(Anonymous block boxes)

有时候须要添加补充性盒,这些盒称为匿名盒(Anonymous block boxes),它们没有名字,不能被CSS选择符选中

不能被CSS选择符选中意味着不能用样式表添加样式.这意味着对于可继承属性,取父元素值.不可继承属性,取初始值
块容器盒要么只包含行内级盒(inline-level box),要么只包含块级盒(block-level box).但一般文档会同时包含二者.在这种状况下,将建立匿名块盒来包含毗邻的行内级盒

<div>
      Some inline text
      <p>followed by a paragraph</p>
      followed by more inline text.
  </div>

将建立两个匿名块盒,一个包含<p>前面的文本(Some inline text),一个包含<P>后面的文本(followed by more inline text),结构以下:

另外一种将建立匿名块盒的状况是,一个行内盒包含了一个或几个块盒.在这种状况下,包含块盒的盒将拆分为两个行内盒放置于块盒先后,而后分别由两个匿名块盒包含.这样块盒就与两个包含行内元素的匿名块盒造成了兄弟关系.

若是行内盒包含多个块盒,而且这些块盒之间没有夹杂内容,将在这些块盒先后建立匿名块盒

<p style="display:inline;">
    第一个匿名盒
    <span style="display:block;">块级盒子</span>
    第二个匿名盒
  </p>

行内级元素(inline-level elements)

当元素的CSS属性display为inline,inline-block或inline-table时,称它为行内级元素
视觉上它将内容与其它行内级元素排列为多行.典型的如段落内容,有文本(能够有多种格式譬如着重),或图片,都是行内级元素

行内级盒(inline-level boxes)

行内级元素生成行内级盒
参与行内格式化上下文(inline formatting context)
行内级盒分为行内盒和原子行内级盒

行内盒(inline boxes)

参与生成行内格式化上下文的行内级盒称为行内盒
全部display:inline的非替换元素生成的盒是行内盒

原子行内级盒(atomic inline-level boxes)

不参与生成行内格式化上下文的行内级盒称为原子行内级盒
这些盒由可替换行内元素,或display值为inline-block或inline-table的元素生成,不能拆分红多个盒

<style>
      span {
        display:inline; /* default value*/
      }
  </style>
  <div style="width:10em;">
     span 里的文本 <span>能够
     分红多行由于</span>它是个行内盒。
  </div>

<style>
  span {
    display:inline-block;
  }
</style>
<div style="width:10em;">
   span 里的文本 <span>不能分红多行
   由于它</span> 是个行内块盒。
</div>

匿名行内盒(Anonymous inline boxes)

相似于块盒,CSS引擎有时自动生成行内盒.这些盒也是匿名的,由于他们没有对应的选择器名字.他们继承全部可继承的属性,非继承的属性取initial

匿名行内盒最多见的例子是块盒直接包含文本,文本将包含在匿名行内盒中.空白若是使用white-space去掉,则不会生成匿名行内盒

行盒(Lines boxes)

行盒由行内格式化上下文(inline formatting context)产生的盒,用于表示一行
在块盒里面,行盒从块盒一边排版到另外一边.当有浮动时,行盒从左浮动的最右边排版到右浮动的最左边.
行盒是技术上的实现,开发者一般不用操心它

插入盒(Run-in boxes)

插入盒,由display:run-in定义.由后续盒的类型决定是块盒仍是行盒.能够用来在第一个段落中插入标题

盒的生成

定位模式(Positioning schemes)

CSS 2.1中，一个盒可能根据三种定位模式来布局：

常规流 CSS 2.1中，常规流包括块级盒的块格式化（block formatting），行内级盒的行内格式化和块级与行内级盒的相对定位
浮动在浮动模型中，一个盒先根据常规流布局，而后从流中取出来尽量地左移或右移。其它内容可能会沿着浮动（盒）的一侧排列（Content may flow along the side of a float）
绝对定位 在绝对定位模型中，一个盒会从常规流中所有移除（它不会影响后面的兄弟）并根据包含块肯定位置

若是一个元素是浮动的，绝对定位的或者是根元素，它就叫流外（out of flow）（元素）。若是一个元素不是流外的，就叫流内（in-flow）（元素）。元素A的流是由A和全部最近的流外祖先为A的流内元素组成的集合

css脱离文档流究竟是什么意思，脱离文档流就不占据空间了吗？脱离文档流是否是指该元素从dom树中脱离？

常规流（Normal flow）

常规流中的盒属于一个格式化上下文，多是块或是行内，但不能都是（既是块又是行内）。块级盒参与块格式化上下文。行内级盒参与行内格式化上下文

块格式化上下文

行内格式化上下文

相对定位

浮动(float)

float（盒）就是一个在当前行向左或向右移动的盒。float（或者"floated"或者"floating"盒）最有意思的特性是其它内容会沿着它的一侧排列（能够经过'clear'属性禁止这种行为）。其它内容会沿着left-floated盒的右侧，right-floated盒的左侧排列。

浮动

绝对定位(Absolute positioning)

绝对定位模型中，一个盒会有相对于其包含块的明确偏移，它会从常规流中所有移除（不会影响后面的兄弟）。一个绝对定位的盒会为常规流中的子级和绝对（不是fixed）定位的后代创建一个新的包含块。然而一个绝对定位的元素的内容不会沿着任何其它盒排列。它们可能会遮住其它盒的内容（或者它们自身被遮住），取决于重叠盒的堆叠层级（stack levels）

本规范中出现的绝对定位元素（或者它的盒）表示元素的'position'属性值为'absolute'或者'fixed'

绝对定位

分层展现(Layered presentation)

z-index

对于一个定位的盒，z-index属性指定了：

当前堆叠（stacking context）上下文中，该盒的堆叠层级（stack level）
该盒是否（应该）创建一个堆叠上下文

z-index