CSS中各种布局的背后(-FC)

CSS中各种布局的背后，本质上是各种*FC的组合。CSS2.1中只有BFC和IFC，CSS3中增加了FFC和GFC。盒模型（BoxModel）.png）上图是W3C标准的盒模型，还有一种IE盒模型（IE6以下），唯一的区别是：前者width=content，后者width=content+padding+border如果要将IE盒模型转换为标准盒模型，需要在文档顶部添加声明；有意思的是，后来CSS3中也加入了box-sizing属性，box-sizing:content-box是标准盒模型，box-sizing:border-box是IE盒模型（width包括padding和borders），W3C反过来又认出了微软，这也很有意思。可视化格式化模型（VisualFormattingModel）可视化格式化模型（visualformattingmodel）是用来处理文档并将其显示在视觉媒体上的机制，根据上述框模型，为文档元素生成框（Box）。通俗地说，可视化格式模型是文档中框布局的呈现规则。影响布局的因素框的大小和类型定位方案（常规流、浮动和绝对定位）文档树中元素之间的关系外部信息（如：视口大小、图片固有大小等）FC--格式化ContextFC...谁在骂人？！FormattingContext--Formattingcontext，*FC是可视化格式化模型，用于描述框布局规则。大浪概念来了！块级元素、块级盒、块容器盒、块盒、匿名块盒、内联级元素、内联级盒、原子内联级盒、原子-inline-box,line-box,anonymous-inline-box,inset-box.....报警！！！这些真的不是我做的。W3C里面真的有那么多概念好吗？！！我觉得我进了一个洞！！！头痛……来，我们一一梳理一下……-_-|||块级元素（Block-levelelements）：当元素的CSS属性显示为：block/list-item/table时，它是blockLevel元素块级，视觉上呈现为块状，垂直排列。每个块级元素生成一个主块级框（PrincipalBlock-levelBox）来包含它的后代框和生成的内容，同时参与定位系统（PositioningScheme）。某些块级元素还会在主框之外生成其他框：list-item元素。这些额外的盒子将相对于主盒子放置。块级框（Block-levelboxes）：由块级元素生成，参与块级格式化上下文（BFC）。描述元素及其父元素和兄弟元素的行为。块容器框：只包含其他块级框，或者生成一个只包含行内框的行内格式化上下文。一些块级框，例如表格，不是块容器框。相反，一些块容器盒，例如非替换行内块和非替换表单元格，不是块级盒。描述元素与其后代之间的关系。块盒：块级盒，也是块容器盒。匿名块框：没有名称，不能被CSS选择器选中。块容器框要么只包含行内级框，要么只包含块级框，但文档通常包含两者，在这种情况下，会创建一个匿名块框来包含相邻的行内级框。

行内级元素：当元素的CSS属性显示为：inline,inline-blockorinline-table，它被称为行内级元素。行内级元素生成行内级框并参与行内格式化上下文(IFC)。行内级框：所有display:inline非替换元素生成的框都是行内框。原子行内级框：不参与生成行内格式化上下文的行内级框称为原子行内级框。Atomicinlineboxes：注：原来原子行内级盒被称为原子行内盒。不幸的是，它们不是行内框。规范的勘误表修复了这个错误。不管怎样，当你再次看到原子行内盒时，你可以放心地将其视为原子行内级盒，因为它只是换了个名字。在内联格式化上下文中，原子内联框不能跨多行拆分。行框：行框是由行内格式化上下文（IFC）生成的框，用于表示一条线。在块盒内，行盒从块盒的一侧排版到另一侧。当有浮动时，行框从左浮动的最右边到右浮动的最左边排版。匿名内联框：匿名内联框最常见的例子是直接包含文本的块框。插入框：由于操作的实现定义不充分，插入框已从CSS2.1标准中删除。可能会引入CSS3，但这是实验性的，不适合生产使用。定位方案（Positioningschemes）——正常流（Normalflow）在CSS2.1中，正常流包括块级框的块格式化，行内框的行内格式化，以及块级框和行内框的相对定位。-浮动在浮动模型中，盒子首先按照正常流向布置，然后脱离正常流向尽可能向左或向右移动。内容可以围绕浮动布局。-绝对定位（Absolutepositioning）在绝对定位模型中，盒子完全脱离正常流向（对后续的兄弟元素没有影响），根据包含块来分配位置。BFC--BlockFormattingContext触发条件根元素或其他包含它的元素floatfloat:left/right/inheritabsolutepositioningelementposition:absolute/fixedinlineblockdisplay:inline-blocktablecelldisplay:table-celltabletitledisplay:table-captionoverflowelementoverflow:hidden/scroll/auto/inheritflexboxdisplay:flex/inline-flexlayoutrulesInternalBoxes会在垂直方向上依次放置。Box的垂直距离由margin决定。属于同一BFC的两个相邻框的边距将重叠。每个元素的边距框的左侧接触包含块的边框框的左侧（对于从左到右的格式，否则）。即使存在浮动也是如此。BFC的区域不会和浮动框重叠。BFC是页面上一个隔离的独立容器，容器内部的子元素不会影响外部的元素。反之亦然。在计算BFC的高度时，浮动元素也参与了应用场景的计算关闭浮动：浮动区域不叠加在BFC区域上，防止与浮动元素重叠，防止margincollapse浮动元素的高度崩溃...IFC--InlineFormattingContexts触发块级元素Boxesinsidelayoutrules仅包含inline-level元素的水平布局，一个接一个。这些框的垂直原点从包含块框的顶部开始。放置这些盒子时，会考虑到它们在水平方向上的padding、border、margin所占用的空间。在垂直方向上，这些框可能以不同的方式垂直对齐：它们可能使用底部或顶部对齐方式，或者它们可能通过其内部文本基线对齐。一个可以完全包含一行上所有框的矩形区域称为该行的行框。行框的宽度由包含框和浮点数决定。IFC中的linebox一般在左右两边靠近它的containingblock，但是会因为float元素的存在而发生变化。浮动元素将位于IFC和线盒之间，使线盒的宽度更短。IFC中行框的高度由CSS行高计算规则决定。同一个IFC下的多个lineboxes的高度可能不同（比如一行包含较高的图片，而另一行只有文字）。当inline-levelboxes的总宽度小于包含它们的linebox时，水平渲染规则由text-align属性决定。如果值为justify，那么浏览器会将inline-boxes（不是inline-table和inline-blockboxes）的文本和空格拉伸。当一个inlinebox超过linebox的宽度时，它会被拆分成多个box，这些box分布在多个linebox中。如果一个内联框不能被分割（比如只包含一个字符，或者禁用分词机制，或者内联框受到nowrap或者pre的white-space属性值的影响），那么内联框就会溢出行框。应用场景水平居中：当一个block要在环境中水平居中时，设置为inline-block会在外层生成一个IFC，设置父容器text-align:center可以使其水平居中。垂直居中：创建一个IFC，使用其中一个元素展开父元素的高度，然后设置它的vertical-align:middle，其他内联元素就可以在这个父元素下垂直居中了。FFC--FlexFormattingContexts触发条件当display的值为flex或inline-flex时，会生成一个柔性容器（FlexContainers），柔性容器会为其内容建立一个新的柔性格式化上下文（FFC）布局规则设置为flex的容器呈现为块级元素。设置为inline-flex的容器呈现为内联元素。弹性容器中的每个子元素都是一个弹性项目。弹性项目可以是任意数量。弹性容器外部和弹性项目内部的所有内容均不受影响。简单的说，Flexbox定义了弹性容器中的弹性项如何布局GFC——GridLayoutFormattingContexts触发条件当将一个元素的显示值设置为grid时，该元素将获得一个独立的渲染区域。布局规则在网络中传递在网格容器上定义网格定义行和网格定义列属性在网格项（gridcolumns）上定义网格行和网格列定义每个网格项（griditem）的位置和空间参考):VisualformattingmodelBFC视觉格式化模型神奇背后的原理