css样式控制布局的定位机制

    在网页设计时,控制基本布局是很重要的.所以,需要掌握三个最重要的css概念: 浮动(float)、定位(position)和框模型(box model,也译盒模型).这些概念控制在页面上的安排和显示元素的方式，形成了css的基本布局。

    框模型的概念很简单，容易理解。下面着重解释一下几种定位的不同。css中有三种基本的定位机制: 普通流(normal flow)、浮动和绝对定位。除非特殊的指定，否则所有的框都在普通流中定位.顾名思义，普通流中元素框的位置由元素在(x)HTML中的位置决定.

    1.普通流:就是块级框从上到下一个接一个的排列，框之间的垂直距离由框的垂直空白边计算出来.

    2.相对定位: 相对定位是一个非常容易掌握的概念。如果一个元素进行相对定位，它将出现在它所在的位置(即它在普通流中的位置)上，然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动.(注：在使用相对定位时，无论元素是否移动，它仍然占着原来的空间。因此，移动元素有可能会覆盖其他的元素).

效果图附件1

    3.绝对定位: 相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通中的位置.与之相反,绝对定位使元素的位置与文档流无关,因此不占据空间.普通文档流中其他元素的布局就像绝对定位的元素不存在时一样.

效果图附件2

   绝对定位的元素的位置相对于最近的已定位祖先元素(ancestor element).如果元素没有已定位的祖先元素,那么它的位置就相对于最初的包含块.根据用户代理的不同,最初的包含块可能是画布或HTML元素.

   4.固定定位: 它是绝对定位的一个子类别.差异在于固定元素的包含块是视口.这使我们能够创建总是出现在窗口中相同位置的浮动元素.但是,这种定位方式各种浏览器的支持各有不同,所以,日常我还是使用javascript来控制,来避免麻烦.当然,你也可以查资料单纯使用css来解决.

   5.浮动定位: 浮动模型可以左右移动,直到它的外边缘碰到包含框或另一个浮动框的边缘.因为浮动框不在文档的普通流中,所以文档普通流中的块框表现得就像浮动框不存在一样.
效果图附件3