视觉格式化模型细节包含块的定义元素（生成的）盒的位置有时候是根据一个特定的矩形计算的，叫做元素的包含块（containingblock）。元素包含块的定义如下：元素包含块其为根元素。其包含块是一个被称为初始包含块的矩形。对连续媒体，尺寸取自视口的尺寸，并且被固定在画布开

常规流常规流中的盒属于一个FC，可能是BFC或是IFC中的一个。块级盒参与BFC，行内级盒参与IFC。BFCBFC的产生条件：float：left|rightposition：absolute|fixeddisplay：inline-block|table-cell|table-caption（以及匿名的表格元素）overflow:hidden|auto|scrollBFC的布局

浮动一个浮动盒会向左或向右移动，直到其外边界挨到包含块边界或者另一个浮动盒的外边界。如果存在行框，浮动盒的上外（边界）会与当前行框的上（边界）对齐。如果没有足够的水平空间来浮动，它会向下移动，直到空间合适或者再没出现过其他浮动。因为浮动盒不在常规流内，在浮动盒之前或者之后创

绝对定位绝对定位模型中，盒相对其包含块偏移，它会从常规流中全部移除（不会影响后面的兄弟）。绝对定位的盒会为常规流中的子级和绝对（不包括fixed）定位的后代建立一个新的包含块。然而绝对定位的内容不会沿着任何其他盒排列。它们可能会遮住其他盒的内容（或者被它们自身遮住），取决于重叠盒

分层展示z-index属性该属性指定了：当前堆叠上限爱问（stackingcontext）中，该盒的堆叠层级（stacklevel）；该盒是否应该建立一个堆叠上下文；该属性的取值为：<integer>：是生成盒当前堆叠上下文中的堆叠层级，该盒还会建立一个新的堆叠上下文。auto：生成盒在当前堆叠上下文中的堆叠层级为

控制盒的生成控制盒就是我们常说的盒。盒的类型对其在视觉格式化模型中的行为有一定影响。display的取值display属性指定了盒的类型：none：此元素不会被显示。block：此元素将显示为块级元素，此元素前后会带有换行符。inline：默认。此元素会被显示为内联元素，元素前后没有换行符。

视觉格式化模型视觉格式化模型：对于可视化媒体，用户代理怎样处理文档树。在视觉格式化模型中，文档树中的每个元素根据其盒模型生成0或多个盒。这些盒的布局由以下因素控制：盒尺寸与类型定位方案（常规流、浮动与绝对定位）文档树中元素间的关系外部信息（例如视口大小、图片的固有尺寸

外边距margin取值<length>：一个固定值<percentage>：百分比根据当前生成盒的包含块的width来计算。注意，margin-top和margin-bottom也是根据其包含块的width来计算的。如果包含块的width取决于该元素，那么产生的布局在CSS2.1是未定义的。auto：具体见“计算width与margin”章节。m

中文链接：http://www.ayqy.net/doc/css2-1/cover.html英文链接：https://www.w3.org/TR/2011/REC-CSS2-20110607/本笔记是2020年自学前端时所写，当时写在word文档上，今天重温，就搬到博客园上来。盒尺寸盒模型的组成css盒模型描述了一个为文档树中的元素生成的，根据视觉格式化模型进