CSS篇第9章 Visual Formatting Model 部分翻译

　　为了弄明白BFC、IFC以及定位、流的问题，翻译部分Visual Formatting Model章节要点，如下：

注：当且属首次翻译，特别粗糙，并无与实战结合，请勿相信，仅供参考

翻译约定：

中文名	英文名	示例描述
浏览器	User agents
框	box
元素	element
块级元素	block-level element
定位机制	positioning scheme
内容块	containing block
框的渲染/生成	box generation
块级框	block-level box	如：display属性为“block”、“list-item”、“table”的元素，table框、可替换元素
块级容器框	block container box	如：不可替换的inline-block、不可替换的table cell
块框	block box	即属于块级框、又属于块级容器框
行内级框	inline-level box	如：display属性值为"inline"、“inline-table”，“inline-block"的元素
行内框	inline box	如：大部分行内级框属于行内框，但是以下不属于行内框：可替换的行内级元素、inline-block元素、inline-table元素
原子性行内级框	atomic inline-level block	如：可替换的行内级元素(如：input)、inline-block元素、inline-table元素
可替换元素	Replaced element	如：<img>, <object>, <video>; <textarea>, <input>; 匿名可替换元素
不可替换元素	Non-replaced element
流外	Out of flow	如：根元素、浮动元素、绝对定位元素
流内	In flow

部分关系图:

块级框、块级容器框、块框

行内级框、参与IFC的框、行内框

解释：

1. 可替换元素

　　可替换元素是一种其展现不在CSS限制范围的元素，也就是说：它的展现独立于CSS。典型的可替换元素有：

　　1. <img>, <object>, <video>, 　　　　　　display属性为：inline

　　2. 表单元素：<textarea>, <input>. 　　　　display属性为：inline-block

　　3. 有些元素在特定情况下才属于可替换元素，如：<audio>, <canvas>，　　display属性为：inline

　　4. 使用CSS属性content插入的内容称为匿名可替换元素。

　　这类元素的典型特点是：没有结束标签，因此开始结束标签之间也没有内容，内容通过属性（如：value）来指定；你也可以理解为：该标签会被外面的资源所代替。

2. 不可替换元素：

　　除上面之外的所有HTML元素称为不可替换元素。

翻译正文：

9. 　　　　Visual Formatting Model 可视化排版模型（简称：VFM）
9.1 　　　 VFM介绍
　　本章和下一章描述了VFM：浏览器将DOM树转换为可视化的过程。
　　VMF中，DOM树中的每个元素根据框模型生成0或多个框。这些框的布局是根据以下因素控制：
　　1. 框尺寸和类型（框生成方式）
　　2. 定位机制（常规流、浮动、绝对定位）
　　3. DOM树中元素间的关系
　　4. 外部因素（例如：viewport尺寸、图片的内在尺寸等）

　　（跳过Continuous media, paged media）
　　VFM并没有规定排版的所有方面（如：letter-spacing算法），本规范也不会讲到不同浏览器对排版处理的差异。
9.1.1　　viewport

　　（译者注：跳过不译）
9.1.2　　内容块
　　CSS2.1中，许多框的position和size是根据其内容块计算的。一般来说，一个DOM元素生成的框会被后代框当做内容块，我们俗称：一个框为后代节点“建立”了内容块。短语："一个框的内容块"指的是"包围这个框的内容块"，并不是这个框生成的内容块。

　　每一个框都是根据它的内容块来定位，但并不总是限制于内容块中，因为它有可能会（溢出）overflow；
　　关于内容块尺寸计算的详细信息请参考下章。

9.2　　　框的渲染/生成
　　本小节讨论了CSS2.1中生成的框的类型，类型的不同会影响框在VFM中的处理方式。以下的display属性用于指定框的类型。

9.2.1　　块级元素、块级框
　　DOM源码中，按照块排版的元素称为块级元素（Block-level element）(如：paragraph对应的p标签)，当元素的display属性为“block”、“list-item”、“table”时，该元素成为块级元素；

　　每一个块级元素都会生成一个"主块级框"（Principal block-level box）用于包含后代框和生成的内容，这个框会参与到定位机制和BFC中。部分块级元素（如：“list-item”）会生成除了主块框之外的额外框，这些额外框根据主块级框的位置放置。

　　除了后面章节单独介绍的table框、可替换元素，一个块级框也是一个块级容器框。一个块级容器框要么只能包含块级框、或者行内框（建立一个IFC）。并非所有的块级容器框都属于块级框：不可替换的inline-block、不可替换的table cell属于块级容器框，但不属于块级框。

　　同时属于块级框和块级容器框的框称为块框。

　　块级框、块级容器框、块框有时一概简称为"块"。

9.2.1.1　　匿名块框
　　如下的一段HTML代码：

<DIV>
  Some text
  <P>More text
</DIV>

　　假设div和p元素的display为block，那么div就拥有了行内元素和块级元素，为了简化定义排版模型，我们假设存在一个匿名块围绕着文本some text。

　　换言之，如果块级容器框（如：div元素）包含块级框（如：p元素），那么我们强制块级容器框只包含块级框，即：将some text设置为块级框，只不过是匿名的。

　　当行内框的代码中包含块级框时，这个行内框（以及祖先行内框）会被分成多段围绕在这个块级框上下，因此行内框被打断成两段（即使其中一段是空文本），中间夹着块级框。考虑到上面简化的排版模型，这些前后的行内框被匿名块框包围，中间的那个块级框成为匿名块框的兄弟节点。当这样的行内框遇到相对定位时，也会影响到其中的块级框。

　　这种模型也会应用到如下规则（p元素为inline，span为block）的代码中：

p    { display: inline }
span { display: block }

<P>
　　This is anonymous text before the SPAN.
　　<SPAN>This is the content of SPAN.</SPAN>
　　This is anonymous text after the SPAN.
</P>

　　p元素包含了匿名文本C1、块级元素C2、匿名文本C3，最终生成的框为：body代表一个块框，包含了一个行内框，这个行内框内部包含了：匿名块框C1、span块框、匿名块框C2。

　　匿名框会从父框中继承一些可被继承的属性（如：第一个例子中的div父框），不可继承的属性会有初始值。例如：匿名框的font会被继承，但是外边距是0。

　　设置在匿名框的父元素上的属性也会应用到元素本身和内容上。例如：在p元素上设置border属性，导致边框会围绕在C1（C1无右边框）和C2（无左边框）上。

　　针对行内容器框设置边框，部分浏览器会有其它的处理方式。（译者注：跳过不译）

9.2.2　　行内元素、行内框
　　HTML代码中，不会按照块排版的元素称为行内元素。它的内容处于一行中（如：p元素中的em元素，行内图片等）。display属性值为"inline"、“inline-table”，“inline-block"的元素称为行内级框，这些框会参与到IFC（Inline Formatting Context）中。

　　当一个元素即属于行内级，且内容又参与到IFC中时，该元素称为行内框。不可替换元素的display属性为inline时称为行内框。不属于行内框的行内级框（例如：可替换行内级元素、inline-block元素、inline-table元素）称为："原子性行内级框"，因为他们会作为一个整体参与到IFC中。

9.2.2.1 匿名行内框
　　块容器元素内部的任何直接子文本都必须按照行内元素来处理（例外：内部含有块框时，会当做匿名块框处理）。

　　如下的一段代码：

<p>Some <em>emphasized</em> text</p>

　　p元素生成一个块框，em元素生成一个行内框，文本"Some"和"text"生成行内框。后者称为匿名行内框，因为他们没有相关联的行内级元素将这些文本包围起来。

　　匿名行内框会从父块框中继承部分属性，不可继承属性使用初始值。（如：匿名框从p元素继承了color，但background却是透明的（译者注：chrome下background也继承了））

　　由于"white-space"属性不会生成匿名块，因此空白内容应该会被重叠起来。

　　如果清楚匿名框在BFC、IFC中所属的类型，那么规范统称这些匿名行内框、匿名块框为匿名框。

　　更多的匿名框将在后面介绍table排版时介绍。

9.2.3 Run-in框
　　display为run-in将在CSS3中定义。

9.2.4 display属性
　　初始值 inline

　　下列各值的解释：
　　block
　　元素生成块框
　　inline-block
　　元素生成一个行内级的块容器框，对内是一个块框，对外则是一个原子性的行内框。
　　list-item
　　元素生成多个行内框，如：ul元素生成一个块框，里面的li元素的display属性默认为：list-item。
　　none
　　元素不会出现在VFM中，不会生成框，也不会对外面的布局有影响。后代元素也不会生成框，为后代节点设置display属性无法覆盖这种方式。

　　table，... 元素生成类似于table的格式。

　　除了定位元素、浮动元素、根元素外，display属性计算出来的值就是设定的值。关于这三类的情况，请参考这一节”display、position、float的关系“。

　　虽然display属性的初始值为inline，但浏览器的默认样式会覆盖这一值。

9.3　　定位机制
　　CSS2.1中，一个框会根据三种定位机制来布局：
　　1. 常规流　　　块级框的块排版、行内级框的行内排版、块级框与行内级框的相对定位
　　2. 浮动　　　　浮动模型中，框首先按照常规流布局，然后从常规流中去除，接着移动尽左或尽右的地方，它的内容会跟随移动。
　　3. 绝对定位　　该模型中，框直接从常规流中移除，然后根据这个框的内容块来计算位置

　　根元素、浮动元素、绝对定位元素处于流外，不处于流外的其余元素处于流内。元素A的流包含了元素A本身、和A里面的所有最近流外祖先元素为仍A的元素。

　　注意：根元素虽然处于流外，但是position属性确属于static

9.3.1　　position属性
　　CSS2.1中, position和float属性决定了采用哪种定位机制来计算框的位置。

　　可选值： static, relative, absolute, fixed, inherit
　　初始值： static

　　各值的解释：
　　static
　　该元素的框按照常规流布局，top, right, bottom, left属性无效
　　relative
　　框根据它在常规流中的正常位置进行偏移；该值对table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption元素无效。
　　absolute
　　框的位置根据框所在的内容块进行定位
　　fixed
　　框根据当前浏览器的视口定位（viewport），它不会随着页面的滚动而移动

　　多数浏览器会为根元素的position属性赋值static。

9.3.2　　框偏移：top, right, bottom, left
　　如果一个元素的position属性不为static，则称这个元素为定位元素。定位元素生成定位框，拥有以下四个属性：
　　top
　　right
　　bottom
　　left
　　初始值 auto

　　赋值类型：
　　length
　　不允许负值
　　auto
　　对于不可替换元素，该值与所属的属性top，right, bottom, left有关。详见绝对定位小节。
　　对于可替换元素，其效果取决于该元素本身的尺寸。详见绝对定位小节。

9.4　　常规流
　　常规流中，块级框参与BFC，行内级框参与IFC。

9.4.1　　BFC
　　块框会参与到所属内容块为BFC的计算中，并非所有块框都会为其子节点建立BFC。满足下面任何一个条件即会建立BFC：
　　1. float元素不为none
　　2. 绝对定位元素（position不为static）
　　3. 不属于块框的块容器框（如：inlien-block，table-cells, table-caption）
　　4. overflow属性不为visible的块框（除非...，译者注：跳过不译）

　　BFC中，框会按照垂直方向依次排列，相邻的两个块级框的margin外边距会发生重叠。
　　BFC中，每个框的左外边缘贴在了内容块的左边，即使该框为float。

9.4.2　　IFC
　　IFC中，行内框水平排列，margin不会发生重叠，对应的这个内容块成为行框。

　　行框的width是根据其内容块决定的，高度根据line-height计算规则决定。

　　（译者注：跳过不译）

9.7　　display, position, float之间的关系：
　　影响框生成的三个属性：display, position, float关系如下：
　　1. display为none，则position和float无效，不会生成框。
　　2. 否则如果position为absolute, fixed，则float计算为none；display按下表格转换：inline变为block
　　3. 否则如果float不为none，display按下表格转换
　　4. 否则如果元素是根节点，display按下表格转换
　　5. 否则按照display设定的值展示

Specified value	Computed value
inline-table	table
inline, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block	block
others	same as specified