CSS标准(5)-定位体系


  1. 常规流(Normal flow)
    1. 块格式化上下文
    2. 行格式化上下文
  2. 浮动(Floats)
  3. 绝对定位(Absolute positioning)
  4. 总结

一个框(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 许可协议。转载请注明出处!