div+css布局漫谈.docVIP

div id=warp?div id=column1这里是第一列/div?div id=column2这里是第二列/div?div class=clear/div/divCSS: #wrap{ width:100%; height:auto;}#column1{ float:left; width:40%;}#column2{ float:right; width:60%;}.clear{ clear:both;} position : static | absolute | fixed | relative 取值： static :　 默认值。无特殊定位，对象遵循HTML定位规则 absolute :　 将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index 属性定义 fixed :　 未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范 relative :　 对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置 它来实现一行两列的例子 xhtml: div id=warp?div id=column1这里是第一列/div?div id=column2这里是第二列/div/divCSS: #wrap{ position:relative;/*相对定位*/width:770px;}#column1{ position:absolute; top:0; left:0; width:300px;}#column2{position:absolute; top:0; right:0; width:470px;}他们的区别在哪? 显然，float是相对定位的，会随着浏览器的大小和分辨率的变化而改变，而position就不行了，所以一般情况下还是float布局！ 2.CSS常用布局实例 一列单行一列 body { margin: 0px;?? padding: 0px;? text-align: center;? }#content {? margin-left:auto;? margin-right:auto;? width: 400px;}两行一列 body {? margin: 0px;?? padding: 0px;?? text-align: center;}#content-top { margin-left:auto;?? margin-right:auto; width: 400px; }#content-end {margin-left:auto; margin-right:auto;? width: 400px; }三行一列 body {? margin: 0px; padding: 0px;? text-align: center;? }#content-top {? margin-left:auto;? margin-right:auto;? width: 400px;}#content-mid { margin-left:auto; margin-right:auto;? width: 400px;}#content-end { margin-left:auto; margin-right:auto; width: 400px;? }两列单行两列 #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; marg