CSS视觉格式化模型，你真的了解么？( 三 ) _CSS

绝对定位（absolute或fixed position）：盒从常规流中完全脱离出来，并相对其包含块来指定其位置。

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' 的计算值为指定的值。

转换对应表：

文章插图

常规流（Normal flow）常规流中，在块级上下文里面，他们竖着排列；在行级上下文中，他们横着排列。
触发条件：position为static，relative且float为none 。

position为static时，盒的位置是常规流里布局的位置。
postion为relative时，盒偏移位置由top，bottom，left和right指定，即时有偏移，仍然保留原有的位置，其他常规流不能占用这个位置。

块级格式化上下文（Blockformatting contexts）浮动盒，绝对定位盒，非块盒的块容器盒，overflow非visible的块盒均会建立块级格式化上下文。
块级格式化上下文中，块盒会从包含块的顶部开始，一个接一个在垂直方向摆放。两个兄弟块容器盒之间垂直方向上的外边距会发生重叠。
在块级格式化上下文中，每个盒的左外边距均紧贴其包含块的左边。即时在浮动的情况下，除非盒创建了一个新的格式化上下文（在这种情况下该盒可能会为了避开浮动盒而变窄）。
行级格式化上下文Inline formatting contexts在行级格式化上下文中，盒会从包含块的顶部开始，一个接一个的水平摆放。摆放这些框的时候，它们在水平方向上的外边距、边框、内边距所占用的空间都会被考虑在内。在垂直方向上，这些盒可能会以不同形式来对齐：它们可能会把底部或顶部对齐，也可能把其内部的文本基线对齐。能把在一行上的盒都完全包含进去的一个矩形区域，被称为该行的行盒。
行盒一定会扩展到足以容纳它所包含的全部行内盒。一般行内盒的左边紧贴其包含块的左边，右边紧贴其包含块的右边。浮动盒可以插在包含块边缘与行内盒边缘之间。
当一行上的行内盒的总宽度小于包含它们的行盒的宽度，则它们在行级盒内的水平分布由'text-align'属性来决定。如果该属性取值为'justify'，则用户代理可拉伸行内盒(但不能是inline-table和inline-block框)中的空格和字间距。
当一个行内盒的总宽度超过了行盒的宽度，则行盒会被分割成几个行盒。如果此行内盒不可分割（例如：单个字符、或语言指定的文字打断规则不允许在此行内盒中出现打断、或该行内盒受white-space属性为nowrap或pre的影响），则该行内盒溢出该行盒。
相对定位相对定位指盒相对其在常规流或浮动的位置的偏移。当一个盒设置了相对定位（position为relative），仍然保留盒在文档流或浮动盒中的原始位置，其后紧接的元素依然根据元素的原始位置排列。这意味着相对定位会导致盒重叠。
然而，如果相对定位导致 'overflow:auto' 或 'overflow:scroll' 的框溢出，则用户代理必须允许通过创建滚动条来使用户访问到这些内容(在它的偏移后位置上)，这可能会影响布局。
相对定位框保持它在常规流中的尺寸，包括最初为其保留的换行和空白。包含块定义中说明了相对定位盒会在何时创建一个新的包含块。
对于相对定位元素，'left'和'right'属性会在不改变其框尺寸的情况下水平地移动框。盒不会由于'left'或'right'属性而被分割或被拉伸，因此使用的值总是left=-right 。
如果'left'和'right'值都是'auto'(它们的初始值)，则其使用值就是'0'(也就是框在它们的初始位置) 。