视觉格式化模型细节

包含块的定义

元素（生成的）盒的位置有时候是根据一个特定的矩形计算的，叫做元素的包含块（containing block）。元素包含块的定义如下：

 分页媒体中，一个绝对定位的元素是相对于其包含块定位的，忽略所有的页结束符（就像文档是连续的意义），该元素可能被拆分到多页。对于绝对定位的内容，如果被解析到一个除元素所在的页面之外的其他页面上的位置，或者是当前页上已经为打印渲染好了的位置，打印机可能把该内容让在：

• 当前页上的另一个位置
• 后续页
• 直接忽略它

内容宽度：width属性

该属性指定了盒的内容宽度，不适用于非替换的行内元素。非替换的行内元素盒的内容宽度是它里面渲染的内容（的内容宽度）。在“控制盒”一节讲到过，行内盒都被排列在行框里，行框的宽度由他们的包含块决定（也就是行框宽度是自适应包含块宽度的），但可能因为浮动的出现而被缩短。

属性值的含义如下：

• <length>：一个固定值。
• <percentage>：一个百分比值，根据生成的盒的包含块的宽度来计算。如果包含块的宽度取决于该元素的宽度，那么产生的布局在CSS2.1中是未定义的。注意：对于那些包含块是基于一个块容器元素的绝对定位元素，百分比是根据这个元素的内边距框的宽度计算的。这与CSS1不同，（CSS1中）百分比宽度总是根据父级元素的内容框计算的。
• auto：取决于其他属性的值，见下面章节。

计算width、margin-left、margin-right、left和right

元素的width、margin-left、margin-right、left和right属性用于布局的值，取决于生成盒的类型以及相互影响（用于布局的值有时被称为应用值）。原则上，应用值与计算值一样，都是把auto替换成一些合适的值，百分比相对其包含块来计算，但也存在例外。以下情况需要加以注意：

行内非替换元素

width不适用：

• margin-left和margin-right计算值为auto时，应用值为0。
• left和right的值由相对定位中的规则确定。

行内替换元素

 margin-left和margin-right为auto时的计算值为0。

left和right的值由相对定位中的规则确定。

常规流中的非替换inline-block元素

如果width是auto，应用值就与浮动元素一样是自适应宽度。

计算值为auto的margin-left或者margin-right的应用值变为0。

常规流中的替换inline-block元素

与行内替换元素完全一致。

常规流中的块级非替换元素

其他属性的应用值，必须保证如下约束：

margin-left + border-left + padding-left + width +

margin-right + border-right + padding-right = 包含块的宽度

• width不为auto
  • 如果margin-left和margin-right都是auto，那么它们的应用值相等。这回让该元素相对于其包含块居中。
  • 如果border-left + padding-left + width + border-right + padding-right再加上所有不为auto的margin-left或margin-right的结果大于包含块的宽度，那么所有margin-left或margin-right的auto值会被当做0。
  • 如果以上的属性计算值都不是auto，就说该值被过渡限制了，其中一个应用值将与其计算值不同。如果包含块的direction属性为ltr，margin-right的指定值会被忽略，并且重新计算该值，以便让等式成立。如果direction的值为rtl，就换成margin-left。
• width为auto，则所有其他的auto值都变为0，并且width由产生的等式得出。
• 如果有且仅有一个值被指定为auto，则其应用值由等式得出。

left和right的值由相对定位中的规则确定。

常规流中的块级替换元素

width的应用值由行内元素决定。然后，用非替换的块级元素的规则来确定外边距。

（注意，这里的替换元素要求是“块级”的，即如果要让input等替换元素居中显示，必须加上display:block。）

浮动的非替换元素

如果margin-left或者margin-right的计算值为auto，其应用值为0。

如果width的计算值为auto，应用值就是自适应（shrink-to-fit）宽度。

自适应宽度的计算与自动表格布局算法去算一个表格单元的宽度类似。粗略地讲：通过格式化不含除显式换行外的换行来计算首选宽度（perferred width），然后计算首选最小宽度（perferred minimum width），例如，通过尝试所有可能的换行。CSS2.1没有定义准确的算法。第三步，算出可用宽度（available width）：这种情况下，就是包含块的宽度减去margin-left、border-left、padding-left、margin-right、border-right、padding-right以及所有相关滚动条的宽度的应用值。

那么自适应宽度就是：min（max（首选最小宽度，可用宽度），首选宽度）

left和right的值由相对定位中的规则确定。

浮动的替换元素

如果margin-left或者margin-right的计算值为auto，其应用值为0。

width的应用值见行内替换元素宽度的计算。

left和right的值由相对定位中的规则确定。

绝对定位的非替换元素

就本节和下节而言，术语（元素的）“静态位置”，大致指的是元素在常规流中的位置。更精确地：

• 静态位置包含块（static-position containing block）是一个假想盒的包含块，（假想盒）将是该元素的第一个盒，它指定了position的值为static并且float为none。
• left的静态位置是从包含块的左边界到作为该元素的第一个盒的假象盒的左外边距边界的距离。如果假想盒在包含块的左边，那么值为负。
• right的静态位置是从包含块的右边界到与上面相同的假想盒的右外边距边界的距离。如果假想盒在包含块边的左边，那么值为正。

但不用实际计算假想盒的尺寸，UA可以随意猜测它可能的位置。出于计算静态位置的目的，fixed定位元素的包含块为初始包含块，而不是视口，并且所有可滚动的盒应该假设滚动到其起点。

决定这些元素的应用值的约束是：left + margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right + right = 包含块的宽度。

自适应宽度的计算见浮动的非替换元素。

绝对定位的替换元素

这里绝对定位的非替换元素的约束方程仍然适用。

width的应用值由行内替换元素决定。如果margin-left或margin-right被指定为auto，其应用值由下面的规则决定：

• 如果left和right值都是auto，然后如果建立静态位置包含块的元素的direction为ltr，把left设置为静态位置，否则如果direction为rtl，就把right设置为静态位置。
• 如果left和right其中一个为auto，把所有值为auto的margin-left或者margin-right替换为0。
• 如果此时margin-left和margin-right仍然都是auto，解方程时要添上额外的的约束：2个margin必须相等，除非这会让它们为负。这种情况下，如果包含块的direction是ltr（或rtl），则把margin-left（或margin-right）设置为0，再求出margin-right（或margin-left）。
• 如果此时只剩一个auto了，就解方程求出这个值。
• 如果此时该值被过渡限制了，当包含块的direction为rtl（或ltr）时，忽略left（或right），再求出这个值。

最小、最大宽度：min-width和max-width

暂略

内容高度：height属性

该属性指定了盒的内容高度（content height）。该属性不适用于非替换的行内元素。其取值含义如下：

• <length>：指定一个固定值。
• <percentage>：制定一个百分比高度。百分比参照生成盒的包含块的高度。如果包含块的高度没有显示指定（即去绝对内容高度），并且该元素不是绝对定位的，则计算值为auto。根元素上的百分比高度是相对于初始包含块的。注意：对于那些包含块基于一个块级元素的绝对定位元素，百分比根据这个元素的内边距框（padding box）的高度来计算。这与CSS1不同，（CSS1中）百分比总是根据父级元素的内容框（content box）来计算。
• auto：取决于其他属性的值。

注意，绝对定位元素的包含块的高度独立于该元素本身的大小，因此这种元素上的百分比高度都可以计算出来（can always be resolved）。然而，可能直到文档中在此之后的元素处理完毕后，才能获知该高度

计算height与margin

计算top、margin-top、height、margin-bottom和bottom的值，必须区分盒的种类。

行内非替换元素

height属性不可用。

内容区（content height）的高度应该基于字体，但本规范没有具体说明。

行内替换元素、常规流中的替换inline-block元素、常规流中的块级替换元素、浮动的替换元素

如果margin-top或margin-bottom为auto，其应用值为0。

对于height的计算值为auto的情况：

• 如果该元素具有固有高度，则height的应用值就是该固有高度。
• 如果该元素不具有固有高度，但width的计算值不为auto，且该元素具有固有比例，height的应用值为“宽度的应用值/固有比例”。
• 如果以上情况都不满足，则height的应用值必须设置为比例为2:!，高度不超过150px并且宽度不超过设备宽度的最大矩形的高度。

块级非替换元素

此处讨论的是两种情况：

• 常规流中的块级不可替换元素，overflow的计算值为visible。
• 常规流中的块级不可替换元素，overflow的计算值不为visible但已经传播到视口。

如果margin-top或margin-bottom为auto，则其应用值为0。

如果height为auto，高度取决于该元素是否含有块级子级以及是否具有padding或border。该元素的高度为从其内容上边界到下面第一个适用的（位置）的距离：

• 最后一个行框的下边界。
• 最后一个流内子级的下外边距边界，如果该子级的下外边距没有和该元素的下外边距合并的话。
• 最后一个流内子级的下边框边界，如果其（该流内子级）上外边距不与该元素的下外边距合并的话。
• 否则为0。
  

只考虑常规流中的子集（即浮动盒和绝对定位盒会被忽略，并且相对定位的盒不考虑其偏移）。注意子级盒可以是一个匿名块盒。

绝对定位的非替换元素

对于绝对定位的元素，垂直方向的应用值必须满足这样的约束：top + margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom + bottom = 包含块的高度。

绝对定位的替换元素

height的应用值由行内替换元素（的固有高度）决定，其他与上面的类似。（官网写得让人云里雾里的） 

复杂情况

本节适用于：

• 常规流中的块级非替换元素，当overflow的计算值不为visible时（除了overflow值已经传播到了视口的情况）
• 非替换的inline-block元素
• 浮动的非替换元素

如果margin-top或者margin-bottom为auto，其应用值为0。如果height是auto，高度取决于该元素的后代，根据BFC中的auto高度。

对于inline-block元素，在计算行框时，使用外边距框。

BFC中的auto高度

特定情况下（绝对定位的非替换元素，以及上面的复杂情况），一个建立了BFC的元素的高度按照如下规则计算：

• 如果它只含有行内级子级，高度就是最高的行框的顶端与最低的行框的底端之间的距离。
• 如果它只含有块级子级，高度就是最高的块级子级盒的上外边距边界到最低的块级子级的下外边距边界之间的距离。
• 绝对定位的子级会被忽略，并且相对定位的盒不考虑其偏移。
• 如果元素含有任意下margin edge位于元素的下content edge下方的浮动的后代，那么高度增加至能包含这些后代。只考虑参与此BFC的浮动，例如，不考虑绝对定位的后代中的浮动或其他浮动。