CSS标准(5)-定位体系

一个框(box，就是元素形成的方块等)可以根据三种定位体系布局。

常规流(Normal flow)

正常排版包括对块级框的块格式化，对行级框的行格式化，对块级框和行级框的相对定位。框在正常排版中必然属于一个格式化上下文，要么是块格式化上下文，要么是行格式化上下文。块级框参与块格式化上下文。行级框参与行格式化上下文。

position=static，该框(box)是一个常规框，布局根据常规流。

position=relative，框的位置根据常规流计算（被称为常规流中的位置）。然后框相对于它的常规位置而偏移。

块格式化上下文

在块格式化上下文中，框会从包含块的顶部开始，一个接一个地，垂直向下地摆放。两个兄弟框之间的垂直距离由’margin’属性来决定。在同一个块格式化上下文中，相邻的块级框之间的垂直外边距会出现折叠。不同的块格式化上下文中的元素不会相互影响和作用。

如何触发：The value of ‘position’ is neither ‘static’ nor ‘relative’。

有何意义：

1.可以包含浮动元素

2.不被浮动元素覆盖

3.阻止父子元素的 margin 折叠

行格式化上下文

在行格式化上下文中，框会从包含块的顶部开始，一个接一个地水平摆放。摆放这些框的时候，它们在水平方向上的外边距、边框、内边距所占用的空间都会被考虑在内。在垂直方向上可以以不同的方式对齐：它们的顶部或底部对齐，或根据其中文字的基线对齐。

浮动(Floats)

浮动细则：在浮动模型中，一个框先按照正常排版来摆放，再将它从排版流中取出并尽可能地向左或向右偏移，但是不能高于它前面生成的块框、浮动框和行框的顶。其它内容可以排在一个浮动的周围。

clearance(间隙):设置了clear的元素的 top border edge 要放在相关的浮动元素的 bottom margin edge 之下，把元素垂直推过浮动框。

绝对定位(Absolute positioning)

在绝对定位模型中，一个框会从排版流中完全脱离出来（它对后续的兄弟没有影响），并相对其包含块来指定其位置。

position=absolution，相对于包含块偏移。

position=fixed，相对于可视窗口(包含块)偏移。

Ps:可能产生层叠，CSS样式是三维的，所以需要z-index层叠级别来确定显示的先后顺序。

总结

1. 常规流：所有常规流如同在同一个图层中一样排版。
2. 浮动流:首先根据常规流布局，再将它从流中取出并尽可能地向左或向右偏移，可以看作常规流之上的一个特殊层。
3. 绝对定位:脱离常规流不对兄弟节点产生影响，可以把每个绝对定位的框看做一个单独的图层。

(完)

本文作者 ： cyningsun

本文地址 ： https://www.cyningsun.com/04-22-2014/css-standard-five.html

版权声明 ：本博客所有文章除特别声明外，均采用 CC BY-NC-ND 3.0 CN 许可协议。转载请注明出处！