Div+CSS布局漫谈

Div+CSS布局漫谈

作者:admin 时间:2006-05-28 分类:电脑不说谎 评论:0条 浏览:1685

1.CSS布局常用的方法:
float : none | left | right

取值:

none : 默认值。对象不飘浮
left : 文本流向对象的右边
right : 文本流向对象的左边

它是怎样工作的,看个一行两列的例子

xhtml:
[coolcode]

这里是第一列
这里是第二列

[/coolcode]
CSS:[coolcode]
#wrap{ width:100%; height:auto;}
#column1{ float:left; width:40%;}
#column2{ float:right; width:60%;}
.clear{ clear:both;} [/coolcode]

position : static | absolute | fixed | relative

取值:

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

它来实现一行两列的例子

xhtml:
[coolcode]

这里是第一列
这里是第二列

[/coolcode]
CSS:[coolcode]
#wrap{ position:relative;/*相对定位*/width:770px;}
#column1{ position:absolute; top:0; left:0; width:300px;}
#column2{position:absolute; top:0; right:0; width:470px;}
[/coolcode]

他们的区别在哪?

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

单行三列布局代码
xhtml:

[coolcode]

This is the main content.

This is the left sidebar.

[/coolcode]
CSS:
[coolcode]
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%;}
[/coolcode]

三行三列布局

xhtml:

[coolcode]

这里是第一列
这里是第二列

这里是第三列

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

原创文章,转载请注明: 转载自www.webmaster.me

本文链接地址: Div+CSS布局漫谈

标签:

相关推荐
更多

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*