HTML教程:div+css布局技术漫谈
来源:学生作业帮助网 编辑:作业帮 时间:2024/05/11 18:44:54 HTML
float : none | left | right
取值:
none : 默认值。对象不飘浮
left : 文本流向对象的右边
right : 文本流向对象的左边
它是怎样工作的,看个一行两列的例子
xhtml:
以下是引用片段: 这里是第一列 这里是第二列 |
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:
以下是引用片段: 这里是第一列 这里是第二列 |
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; } |
两行一列
以下是引用片段: 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; width: 370px; } #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: 420px;} |
两行两列
以下是引用片段: #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: 420px;} |
三行两列
以下是引用片段: #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: 420px;} #footer{ width: 700px; margin-right: auto; margin-left: auto; overflow: auto; clear:both; } |
三列
单行三列
绝对定位
以下是引用片段: #left { position: absolute; top: 0px; left: 0px; width: 120px; } #middle {margin: 0px 190px 0px 190px; } #right {position: absolute;top: 0px; right: 0px; width: 120px;} |
float定位
xhtml:
以下是引用片段: 这里是第一列 这里是第二列 这里是第三列 |
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
以下是引用片段:This is the main content.This is the left sidebar.This is the right sidebar.CSS
两行三列 xhtml:
CSS:
三行三列 xhtml:
PS:这里列出的是常用的例子,而非研究之用,对一每个盒子,我都没有设置margin,padding,boeder等属性,是因为我个人觉得,含有宽度定位的时候,最好不好用到他们,除非必不得已,因为如果不是这样的话,解决浏览器兼容问题,会让你头疼,而且产生一系列CSS代码,我觉得这样的效率和效果都不好! 3.CSS布局高级技巧 IE中有浮动对象的双倍距离之BUG(IE Doubled Float-Margin Bug ), 这里还需要具体问题具体解决,下面是解决办法 很明显,第一种下很完美的布局在第二种情况下后果是很凄惨的! 解决的方法是hack
列等高技巧 n行n列布局,每列高度(事先并不能确定哪列的高度)的相同,是每个设计师追求的目标,做法有:背景图填充、加JS脚本的
css:
|
HTML