1.CSS布局常用的方法: 取值: 它是怎样工作的,看个一行两列的例子 xhtml: <div id="warp"> CSS: #wrap{ width:100%; height:auto;} position : static | absolute | fixed | relative 取值: static : 默认值。无特殊定位,对象遵循HTML定位规则 它来实现一行两列的例子 xhtml: <div id="warp"> CSS: #wrap{ position:relative;/*相对定位*/width:770px;} 他们的区别在哪? 显然,float是相对定位的,会随着浏览器的大小和分辨率的变化而改变,而position就不行了,所以一般情况下还是float布局! 2.CSS常用布局实例 一列 body { margin: 0px; padding: 0px; text-align: center; } 两行一列 body { margin: 0px; padding: 0px; text-align: center;} 三行一列 body { margin: 0px; padding: 0px; text-align: center; } 两列 #bodycenter { width: 700px;margin-right: auto; margin-left: auto;overflow: auto; } 两行两列 #header{ width: 700px; margin-right: auto;margin-left: auto; overflow: auto;} 三行两列 #header{ width: 700px;margin-right: auto; margin-left: auto; } 三列 #left { position: absolute; top: 0px; left: 0px; width: 120px; } float定位 xhtml: <div id="warp"> CSS: #wrap{ width:100%; height:auto;} float定位二 xhtml: <div id="center" class="column"> CSS: body {margin: 0;padding-left: 200px;padding-right: 190px;min-width: 240px;} 两行三列 xhtml: <div id="header">这里是顶行</div> CSS: #header{width:100%; height:auto;} 三行三列 xhtml: <div id="header">这里是顶行</div> CSS: #header{width:100%; height:auto;} PS:这里列出的是常用的例子,而非研究之用,对一每个盒子,我都没有设置margin,padding,boeder等属性,是因为我个人觉得,含有宽度定位的时候,最好不好用到他们,除非必不得已,因为如果不是这样的话,解决浏览器兼容问题,会让你头疼,而且产生一系列CSS代码,我觉得这样的效率和效果都不好! |
div+css布局漫谈
最新推荐文章于 2024-09-23 09:16:35 发布
div+css布局漫谈