CSS布局（二）

标签：idc   hvm   put   otf   id3   tgs   pid   srp   bip   

本节内容：

position

float

clear

浮动布局例子

百分比宽度

position

CSS中的position属性设置元素的位置。属性值：static、relative、fixed、absolute。

static

static属性是默认值。任意的position:static；的元素不会被特殊的定位。一个static元素表示它不会定位，一个position属性被设置为其他值的元素表示它会被定位。

relative

Relative表现的和static一样，除非添加了一些额外的属性。在一个相对定位（position属性的值为relative）的元素上设置top、right、bottom、left属性会使其偏离正常位置。其他的元素则不会调整位置来弥补它偏移后剩下的空隙。

fixed

一个固定定位（position属性的值为fixed）元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。和relative一样，top、right、bottom和left属性都可用。

一个固定定位元素不会保留它原本在页面应有的空隙。

absolute

absolute是最棘手的position值。absoulute于fixed的表现类似，除了它不是相对于浏览器窗口而是相对于最近的“positioned”祖先元素。如果绝对定位（position属性的值为absolute）的元素没有“positioned”祖先元素，那么它回想对于文档的body元素，并且它会随页面的滚动而移动。注意：“positioned”元素是指position值不是static的元素。

relative类div是相对定位。如果它是position:static;，那么它的绝对定位子元素会跳过它直接相对于body元素定位。

示例：一个页面布局：

在section里填充了许多文字，使得容器比nav元素高，此时可以正常工作；如果把section里的文字去掉，那么容器比nav元素低，此时nav元素会溢出到容器的外面。

float

另一个布局中常用的属性使float。Float可以实现文字环绕图片。

img{
	float:right;
	margin:0 0 lem lem;
	width:100px;
	height:100px;
}

clear

clear属性被用于控制浮动。

在这个例子中，section元素实际上是在div之后的（DOM结构上），然而div元素是浮动在左边的，于是section中的文字就围绕了div，并且section元素包围了整个元素。如果我们想让section显示浮动元素之后呢？

使用clear就可以将section移动到浮动元素div下面。需要用left值才能清除元素的左浮动。还可以用right或both来清除右浮动或同时向左向右浮动。

overflow

        在使用浮动时，经常会遇到下面的情形：

为了解决这个问题引入一个新的属性：overflow

浮动布局例子

完全使用float来实现页面布局时很常见的。这里实现一个前面用position实现的布局。

这个例子和之前那个外观一样。这里在container类的div上添加了overflow属性，此时即使nav里的高度比container（非浮动）高也不会溢出了。

百分比宽度

百分比是一种相对于包含块的计量单位。它对图像很有用：

设置图片的width:50%,且图片包含在div中，显示如上图。

CSS布局（二）

标签：idc   hvm   put   otf   id3   tgs   pid   srp   bip   

原文地址：http://www.cnblogs.com/ycc-020/p/6091516.html