divcss布局定位详解.doc

div+css布局定位详解 ??? div, css, 详解 1.CSS布局常用的方法：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;}??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 /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是相对定位的，会随着浏览器的大小和分辨率的变化而改变，而position就不行了，所以一般情况下还是float布局！2.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: