Div+Css网页布局之定位篇--Postion及Float属性详解

定位方式之一：POSTION 定位

position : static | absolute | fixed | relative
取值：
static : 默认值。无特殊定位，对象遵循HTML定位规则 
absolute : 将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index 属性定义 
fixed : 未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范 
relative : 对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置

Absolute，CSS中的写法是：position:absolute; 他的意思是绝对定位，他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，在没有设定TRBL，默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。

 

 

 

一般来讲，网页居中的话用Absolute就容易出错，因为网页一直是随着分辨率的大小自动适应的，而Absolute则会以浏览器的左上角为原始点，不会应为分辨率的变化而变化位置。很多人出错就在于这点上出错。而网页居左其特性与Relative很相似，但是还是有本质的区别的。

Relative，CSS中的写法是：position:relative;  他的意思是绝对相对定位，他是参照父级的原始点为原始点，无父级则以BODY的原始点为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。

 

 

 

有时我们还需要依靠z-index来设定容器的上下关系，数值越大越在最上面，数值范围是自然数。当然有一点要注意，父子关系是无法用z-index来设定上下关系的，一定是子级在上父级在下。

它来实现一行两列的例子
xhtml:

以下是代码片段：
<div id="warp"> 
 <div id="column1">这里是第一列</div> 
 <div id="column2">这里是第二列</div> 
</div> 
CSS:

以下是代码片段：
#wrap{ position:relative;/*相对定位*/width:770px;} 
#column1{ position:absolute; top:0; left:0; width:300px;} 
#column2{position:absolute; top:0; right:0; width:470px;} 
 

定位方式之二：FLOAT

float : none | left | right 
取值：

以下是代码片段：
none : 默认值。对象不飘浮  
left : 文本流向对象的右边  
right : 文本流向对象的左边 
它是怎样工作的，看个一行两列的例子

xhtml:

以下是代码片段：
<div id="warp"> 
 <div id="column1">这里是第一列</div> 
 <div id="column2">这里是第二列</div> 
 <div class="clear"></div> 
</div> 
CSS:

以下是代码片段：
#wrap{ width:100%; height:auto;} 
#column1{ float:left; width:40%;} 
#column2{ float:right; width:60%;} 
.clear{ clear:both;}  

显然，float是相对定位的，会随着浏览器的大小和分辨率的变化而改变，而position就不行了，所以一般情况下还是float布局！

CSS常用布局实例:

一列
单行一列

以下是代码片段：
body { margin: 0px;   padding: 0px;  text-align: center;  } 
#content {  margin-left:auto;  margin-right:auto;  width: 400px;  width: 370px; } 

两行一列

以下是代码片段：
body {  margin: 0px;   padding: 0px;   text-align: center;} 
#content-top { margin-left:auto;   margin-right:auto; width: 400px;  width: 370px;} 
#content-end {margin-left:auto; margin-right:auto;  width: 400px;   width: 370px;} 

三行一列]

以下是代码片段：
body {  margin: 0px; padding: 0px;  text-align: center;  } 
#content-top {  margin-left:auto;  margin-right:auto;  width: 400px;   width: 370px;  } 
#content-mid { margin-left:auto; margin-right:auto;  width: 400px;  width: 370px; } 
#content-end { margin-left:auto; margin-right:auto; width: 400px;  width: 370px; }

 
两列
单行两列

以下是代码片段：
#bodycenter { width: 700px;margin-right: auto; margin-left: auto;overflow: auto;  } 
#bodycenter #dv1 {float: left;width: 280px;} 
#bodycenter #dv2 {float: right;width: 410px;} 

两行两列

以下是代码片段：
#header{    width: 700px; margin-right: auto;margin-left: auto; overflow: auto;} 
#bodycenter { width: 700px; margin-right: auto; margin-left: auto; overflow: auto; } 
#bodycenter #dv1 { float: left; width: 280px;} 
#bodycenter #dv2 { float: right;width: 410px;} 

三行两列

以下是代码片段：
#header{    width: 700px;margin-right: auto; margin-left: auto;  } 
#bodycenter {width: 700px; margin-right: auto; margin-left: auto;  } 
#bodycenter #dv1 {  float: left;width: 280px;} 
#bodycenter #dv2 { float: right;  width: 410px;} 
#footer{     width: 700px;  margin-right: auto; margin-left: auto;  overflow: auto;  } 
三列
单行三列
绝对定位

以下是代码片段：
#left { position: absolute; top: 0px;  left: 0px; width: 120px;  } 
#middle {margin: 20px 190px 20px 190px; } 
#right {position: absolute;top: 0px; right: 0px;  width: 120px;} 

float定位
xhtml:

以下是代码片段：
<div id="warp"> 
 <div id="column"> 
 <div id="column1">这里是第一列</div> 
 <div id="column2">这里是第二列</div> 
 <div class="clear"></div> 
 </div> 
 <div id="column3">这里是第三列</div> 
 <div class="clear"></div> 
</div> 

CSS:

以下是代码片段：
#wrap{ width:100%; height:auto;} 
#column{ float:left; width:60%;} 
#column1{ float:left; width:30%;} 
#column2{ float:right; width:30%;} 
#column3{ float:right; width:40%;} 
.clear{ clear:both;}  
float定位二

xhtml:

以下是代码片段：
<div id="center" class="column"> 
  <h1>This is the main content.</h1> 
 </div> 
 <div id="left" class="column"> 
  <h2>This is the left sidebar.</h2> 
 </div> 
 <div id="right" class="column"> 
  <h2>This is the right sidebar.</h2> 
 </div> 

CSS:

以下是代码片段：
body {margin: 0;padding-left: 200px;padding-right: 190px;min-width: 240px;} 
.column {position: relative;float: left;} 
#center {width: 100%;} 
#left {width: 180px; right: 240px;margin-left: -100%;} 
#right {width: 130px;margin-right: -100%;} 
两行三列

xhtml:

以下是代码片段：
<div id="header">这里是顶行</div> 
<div id="warp"> 
 <div id="column"> 
 <div id="column1">这里是第一列</div> 
 <div id="column2">这里是第二列</div> 
 <div class="clear"></div> 
 </div> 
 <div id="column3">这里是第三列</div> 
 <div class="clear"></div> 
</div> 

CSS:

以下是代码片段：
#header{width:100%; height:auto;} 
#wrap{ width:100%; height:auto;} 
#column{ float:left; width:60%;} 
#column1{ float:left; width:30%;} 
#column2{ float:right; width:30%;} 
#column3{ float:right; width:40%;} 
.clear{ clear:both;}  

三行三列

xhtml:

以下是代码片段：
<div id="header">这里是顶行</div> 
<div id="warp"> 
 <div id="column"> 
 <div id="column1">这里是第一列</div> 
 <div id="column2">这里是第二列</div> 
 <div class="clear"></div> 
 </div> 
 <div id="column3">这里是第三列</div> 
 <div class="clear"></div> 
</div> 
<div id="footer">这里是底部一行</div> 

CSS:

以下是代码片段：
#header{width:100%; height:auto;} 
#wrap{ width:100%; height:auto;} 
#column{ float:left; width:60%;} 
#column1{ float:left; width:30%;} 
#column2{ float:right; width:30%;} 
#column3{ float:right; width:40%;} 
.clear{ clear:both;}  
#footer{width:100%; height:auto;} 

PS:这里列出的是常用的例子，而非研究之用，对一每个盒子，我都没有设置margin,padding,boeder等属性，是因为我个人得，含有宽度定位的时候，最好不好用到他们，除非必不得已，因为如果不是这样的话，解决浏览器兼容问题，会让你头疼，而且产生一系列CSS代码，我觉得这样的效率和效果都不好！