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

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

• 盒尺寸与类型

• 定位模式(常规流,浮动与绝对定位)

• 文档树中元素间的关系

• 外部信息(例如,视口大小,内含图片的固定尺寸等等)

包含块(containing blocks)

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

绝对定位元素的包含块

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

1. 如果direction是ltr,包含块的顶,左边是祖先元素生成的第一个框的顶、左内边距边界(padding edges),右、下边是祖先元素生成的最后一个框的右,下内边距边界(padding edges)

2. 包含块的宽度可能是负的

3. 如果direction是rtl,包含块的顶、右边是祖先元素生成的的第一个框的顶、右内边距边界(padding edges),左、下边是祖先元素生成的最后一个框的左、下内边距边界(padding edges)

4. 其他情况下，如果祖先元素不是行内元素，那么包含块的区域应该是祖先元素(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中，一个盒可能根据三种定位模式来布局：

1. 常规流 CSS 2.1中，常规流包括块级盒的块格式化（block formatting），行内级盒的行内格式化和块级与行内级盒的相对定位

2. 浮动 在浮动模型中，一个盒先根据常规流布局，然后从流中取出来尽可能地左移或右移。其它内容可能会沿着浮动（盒）的一侧排列（Content may flow along the side of a float）

3. 绝对定位 在绝对定位模型中，一个盒会从常规流中全部移除（它不会影响后面的兄弟）并根据包含块确定位置

如果一个元素是浮动的，绝对定位的或者是根元素，它就叫流外（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属性指定了：

1. 当前堆叠（stacking context）上下文中，该盒的堆叠层级（stack level）

2. 该盒是否（应该）建立一个堆叠上下文

z-index