css布局模式

标签：

css布局模型在网页中，元素有三种布局模型：

1. 流动模型（Flow）
2. 浮动模型 (Float)
3. 层模型（Layer）

流动Flow模型（一）：

流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。

流动布局模型具有2个比较典型的特征：

• 第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div，h1，p)宽度显示为100%。除非设置该元素宽度。
• 第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）

流动flow模型（二）

任何元素在默认情况下是不能浮动的，让多个块状元素并排显示，float:left;就可以实现。下图是一左一右。

层模型layer

• 层模型有三种形式：

1. 绝对定位(position: absolute)：使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如图所示：
2. 相对定位(position: relative)相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。
3. 固定定位(position: fixed)。fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed?属性功能相同。

Relative与Absolute组合使用

• 决定定位absolute是根据浏览器设置定位的，可以结合相对定位relative来实现相对于某个块元素决定定位。需要决定定的块元素需要{position:absolute;left: ;top:;right: ;bottom: ;},在决定定位的父元素需要{position:relative;}即可。

css布局模式

标签：

原文地址：http://www.cnblogs.com/qinbb/p/5910580.html