CSS+DIV小结3
一、CSS语法——margin
margin : auto | length
参数：
auto : 值被设置为相对边的值
length : 由浮点数字和单位标识符组成的长度值 | 百分数。百分数是基于父对象的高度。对于内联对象来说，左右外延边距可以是负数值。请参阅长度单位
说明：
检索或设置对象四边的外延边距。
如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。
如果只提供一个，将用于全部的四边。
如果提供两个，第一个用于上－下，第二个用于左－右。
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
内联对象要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
margin: margin-top/margin-right/margin-bottom/margin-left;
p#onemargins
{
margin:12px;
}
所有边外补白全部为12px
等价于下面的定义
p#onemargins
{
margin-top:12px;
margin-right:12px;
margin-bottom:12px;
margin-left:12px;
}
为margin-width指定两个值
margin: margin-top/margin-bottom margin-right/margin-left;
p#twomargins
{
margin:12px 5%;
}
上下边外补白是12px,左右边外补白是5%(相对于整个页面)
等价于下面的定义
p#twomargins
{
margin-top:12px;
margin-right:5%;
margin-bottom:12px;
margin-left:5%;
}
二、CSS overflow 属性
定义： overflow 属性设置当元素的内容溢出其区域时发生的事情。
可能的值 值 描述
visible 默认。内容不会被修剪，会呈现在元素之外。
hidden 内容会被修剪，但是浏览器不会显示供查看内容的滚动条。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
三、CSS position属性
CSS的Position很重要，有以下几个值：static，relative，absolute，fixed。
Static：静态定位。如果你没有设置position属性，那么缺省就是static。top，left，bottom，right等属性，在static的情况下是无效的，要使用这些属性，必须把position设置为其他三个值之一。
Relative：相对定位。元素将按照静态定位时的位置进行调整，在静态定位中分配给元素的空间仍然会分配给它，它两边的元素不会向它靠近来填充那个空间，但它们也不会从元素的新位置被挤走。
Absolute：绝对定位。元素将按照包含它的元素的位置进行调整，比如它嵌套在另一个绝对定位的元素中，那么就相对于那个元素定位。
假设要定位的块元素id为myDiv，设置其position为absolute，则myDiv的位置为
1.如果myDiv的父元素具有position属性，不管其值为absolute还是relative，都会相对于父元素的原点坐标进行定位；
2.如果myDiv的父元素没有position属性，则会相对于它的最亲一代具有position的祖宗元素的原点坐标进行定位；
3.如果myDiv的所有父元素都没有position属性，则会相对于body元素的原点坐标进行定位。
这里的原点坐标是指元素的在上角顶点的位置。myDiv的位置由left和top属性指定，省略left和top则left和top均为0。
例如文档有如下结构：
<body>
<div id="f1">
<div id="f2">
<div id="myDiv"></div>
</div>
</div>
</body>
指定myDiv的position为absolute，left为50px，top为20px;
如果只有f1有position属性，则myDiv就以f1的top和left进行定位，
Fixed：固定定位。元素将被设置在浏览器上一个固定位置上，不会随其他元素滚动。形象点说，上下拉动滚动条的时候，fixed的元素在屏幕上的位置不变。需要注意的是IE6并不支持此属性。
注意：很多网页都是居中的，这样，当对元素进行绝对定位的时候，在不同的分辨率下显示会有偏差，这时，我们可以通过类似下面的方法来处理：
<div style="position: relative;">
<div style="position: absolute; top: 10px; left: 10px;"></div>
</div>
