视觉格式化模型基础

(ps:盒子就是框，不同翻译而已)
概念：
    是用来处理文档并将它显示在视觉媒体上的机制


盒模型：
    处理文档时会为每一个元素生成相应的盒。
    就是一套机制/模型，描述了盒子的内容占用空间组成，包含四块：外边距，边框，内边距，内容。
    将元素描述为一个盒子，就能确定元素的大小，尺寸和属性，方便浏览器根据视觉视觉格式化模型机制来进行渲染。




一个盒子的布局：
    盒子的尺寸和类型。
    定位方案(正常排版，浮动和绝对定位)。
    文档树中元素之间的关系。
    外部信息(例如，视口大小，图形的固有尺寸等)。




相关术语：
    包含块：许多框的位置和大小都根据一个名为包含块的矩形框边缘来相对计算得到。每个框会被给予一个相对于其包含块的位置，但它不会被局限在其包含块内；它有可能会溢出。
          有两种，框所处的包含块即框的包含块；框为他的字元素创建的包含块；


    块级元素：display值为：block，list-item，table的元素
    块级框：块级元素生成一个主要的块级框（用来包含其子框和生成的内容，同时任何定位方案都会与这个主要的框有关）。某些块级元素还会在主要框之外产生额外的框：例如“list-item”元素。这些额外的框会相对于主要框来放置
    块容器框：1.除了table框，和可替换元素外的块级框
            2.不可替换的行内块和不可替换的table cell，这两种不是块级框
            一个块容器框要么只包含块级框，要么创建一个行格式化上下文而只包含行内级框
    块框：是块级框的块容器框称作块框
    匿名块框：为了使格式化简单，在某些情况下浏览器自动添加的块框。
            如：:如果一个块容器框(如上例中为DIV生成的框)有一个块级框(如上例中的P)，那么我们强制它只包含块级框在其中。
            <DIV>
              Some text
              <P>More text
            </DIV>
            有一个匿名块框围绕在"Some text"周围
            又如：当一个行内框包含一个属于正常排版的块级框，这个行内框（及与其位于同一行框的行内祖先）会被从周围的块级框（及其连续的块级兄弟Note.png）中分离出来，把行内框分离成两个框，它在块级框两边。在打断之前和打断之后的行框都附入匿名块框，并且该块级框与匿名块框成为兄弟。当这样的行内框受到相对定位影响，任何产生的移动同样影响到包含在行内框内的块级框。


    行内级元素简称行级元素：display值为：inline, inline-table, inline-block
    行级框：行级元素生成行级框
    行内框：'display'值是'inline'的非替换元素生成的行级框
    原子行级框：不属于行内框的行级框(例如可替换的行级元素、行内块元素、行内表格元素)
    匿名行内框：如：<P>Some <EM>emphasized</em> text</P> P元素生成一个块框，其内还有几个行内框。"emphasized"的框是由行内元素(EM)产生的一个行内框，而其它的框("Some"和"text")是块类元素(P)产生的行内框。后者就称为匿名行内框，因为它们没有与之相关的行级元素。




    ps:匿名框的继承属性会从包含它的非匿名框(这里只说是框，没有具体说明是块框还是行内框，注意区别)那里继承。匿名框的非继承属性将取其初始值。例如，匿名框的字体属性继承自DIV，但是外边距是0。 




定位方案：
    1.正常排版。CSS 2.1 中，正常排版包括对块级框的块格式化，对行级框的行格式化，对块级框和行级框的相对定位。(格式化：指如何布局排版)
    2.浮动。在浮动模型中，一个框先按照正常排版来摆放，再将它从排版流中取出并尽可能地向左或向右偏移。其它内容可以排在一个浮动的周围。
    3.绝对定位。在绝对定位模型中，一个框会从排版流中完全脱离出来（它对后续的兄弟没有影响），并相对其包含块来指定其位置。


    排版流之外（out of flow）的元素：浮动、绝对定位或根元素
    排版流之内的（in-flow）的元素：不是排版流之外的元素




正常排版Normal flow
    框在正常排版中必然**属于**一个格式化上下文，要么是块格式化上下文，要么是行格式化上下文。块级框**参与**块格式化上下文。行级框**参与**行格式化上下文。


    块级格式化上下文(BFC)：可以理解为是一个独立的布局容器/区域，这个布局容器提供了一个环境，元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。
                        有这几种框会为其内容创建新的块格式化上下文：浮动框、绝对定位框、非块框的块容器、'overflow'属性非'visible'的块框。
                        表示规则：在块格式化上下文中，框会从包含块的顶部开始，一个接一个地，垂直向下地摆放。两个兄弟框之间的垂直距离由 [[|CSS2/box#propdef-margin'margin']] 属性来决定。在同一个块格式化上下文中，相邻的块级框之间的垂直外边距会出现折叠。
                                每个框的左外边距边要紧贴其包含块的左边。即使在有浮动的情景下也是如此，除非框创建了一个新的块格式化上下文(在这种情况下该框可能会为了避开浮动框而变窄)。


    行内格式化上下文(IFC)：类似于BFC，只是环境中的规则不一样。并且它不像BFC一样可以有某些框来生成，它存在于行框内
                        能把在一行上的框都完全包含进去的一个矩形区域，被称为该行的行框。
                        表现规则：在行格式化上下文中，框会从包含块的顶部开始，一个接一个地水平摆放。摆放这些框的时候，它们在水平方向上的外边距、边框、内边距所占用的空间都会被考虑在内。在垂直方向上，这些框可能会以不同形式来对齐：它们可能会把底部或顶部对齐，也可能把其内部的文本基线对齐。




影响框的生成和布局的三个属性——'display'，'position'和'float'——间的相互关系如下:
    如果'display'值为'none'，那么'position'和'float'无效，元素不生成框。
    否则，如果'position'值为'absolute'或者'fixed'，框绝对地定位'float'计算的值为'none'，并且 display根据下面的表格进行设定(计算值)。框的位置由'top', 'right', 'bottom'和'left'属性和包含块决定。
    否则，如果'float'的值不是'none'，该框是浮动的，且'display'值根据下面的表格进行设定(计算值)。
    否则，如果元素是根元素，'display'值根据下面的表格进行设定(计算值)，除了其在CSS2.1里面没有定义是否指定值'list-item'对应计算值'block'或者'list-item'。
    否则，'display' 的计算值为指定的值。


    指定值                                                                                                                                                             计算值
    inline-table                                                                                                                                                       table
    inline, table-row-group, table-column, table-column-group, table-caption,  table-header-group, table-footer-group, table-row, table-cell, inline-block             block

    其他                                                                                                                                                               与指定值相同

相关链接：

https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Visual_formatting_model

http://www.w3.org/html/ig/zh/wiki/CSS2/visuren#visual-model-intro