代码改变世界

position:static relative absolute margin-left float 属性

2012-04-08 13:09  aivj  阅读(307)  评论(0)    收藏  举报

static，这意味着元素没有被定位，而且在文档中出现在它应该在的位置。

relative，就可以使用 top,bottom,left 和 right
来相对于元素在文档中应该出现的位置来移动这个元素。【意思是元素实际上依然占据文档中的原有位置，只是视觉上相对于它在文档中的原有位置移动了】,是相对于前面的容器定位的。这个时候不能用top left在定位。应该用margin。

比如 :<div style="float:left;width:100px; height:800px;">1</div><div style="float:left; position:relative;margin-left:20px;width:50px;">2</div>

当1固定了位置。1的样式float:left;width:100px; height:800px;

　　　　　　  2的样式为float:left; position：relative；margin-left:20px;width:50px;

2的位置在1的右边，距离120px

absolute 时，元素就脱离了文档【即在文档中已经不占据位置了】，可以准确的按照设置的 top,bottom,left 和 right 来定位了,相对于浏览器的定位,比如：position：absolute；left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置。

----------------------------------------------------------------------------------------------------------------------

margin-left 属性设置元素的左外边距 object.style.marginLeft="10px"

<html> <head> <style type="text/css"> p.leftmargin {margin-left: 2cm} </style> </head>

<body> <p>这个段落没有指定外边距。</p> <p class="leftmargin">这个段落带有指定的左外边距。</p> </body>

</html>

-----------------------------------------------------------------------------------------------------

float http://www.w3school.com.cn/css/pr_class_float.asp