选择显示字体大小

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: 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; margin-left: auto;  }
#bodycenter {width: 700px; margin-right: auto; margin-left: auto;  }
#bodycenter #dv1 {  float: left;width: 280px;}
#bodycenter #dv2 { float: right;  width: 410px;}
#footer{     width: 700px;  margin-right: auto; margin-left: auto;  overflow: auto;  }

三列
单行三列
绝对定位

#left { position: absolute; top: 0px;  left: 0px; width: 120px;  }
#middle {margin: 20px 190px 20px 190px; }
#right {position: absolute;top: 0px; right: 0px;  width: 120px;}

float定位

xhtml:

<div id="warp">
 <div id="column">
 <div id="column1">这里是第一列</div>
 <div id="column2">这里是第二列</div>
 <div class="clear"></div>
 </div>
 <div id="column3">这里是第三列</div>
 <div class="clear"></div>
</div>

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:

 <div id="center" class="column">
  <h1>this is the main content.</h1>
 </div>
 <div id="left" class="column">
  <h2>this is the left sidebar.</h2>
 </div>
 <div id="right" class="column">
  <h2>this is the right sidebar.</h2>
 </div>

css:

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%;}

两行三列

xhtml:

<div id="header">这里是顶行</div>
<div id="warp">
 <div id="column">
 <div id="column1">这里是第一列</div>
 <div id="column2">这里是第二列</div>
 <div class="clear"></div>
 </div>
 <div id="column3">这里是第三列</div>
 <div class="clear"></div>
</div>

css:

#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;}

三行三列

xhtml:

<div id="header">这里是顶行</div>
<div id="warp">
 <div id="column">
 <div id="column1">这里是第一列</div>
 <div id="column2">这里是第二列</div>
 <div class="clear"></div>
 </div>
 <div id="column3">这里是第三列</div>
 <div class="clear"></div>
</div>
<div id="footer">这里是底部一行</div>

css:

#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;}

ps:这里列出的是常用的例子，而非研究之用，对一每个盒子，我都没有设置margin,padding,boeder等属性，是因为我个人觉得，含有宽度定位的时候，最好不好用到他们，除非必不得已，因为如果不是这样的话，解决浏览器兼容问题，会让你头疼，而且产生一系列css代码，我觉得这样的效率和效果都不好！

3.css布局高级技巧

margin和padding总是有可能要用到，而产生的问题如何解决呢？由于浏览器解释容器宽度的方法不同：

ie 6.0 firefox opera等是
真实宽度=width+padding+border+margin
ie5.x
真实宽度=width-padding-border-margin

很明显，第一种下很完美的布局在第二种情况下后果是很凄惨的！

解决的方法是 hack

 div.content {
width:400px; //这个是错误的width，所有浏览器都读到了
voice-family: "\"}\""; //ie5.x/win忽略了"\"}\""后的内容
voice-family:inherit;
width:300px; //包括ie6/win在内的部分浏览器读到这句，新的数值(300px)覆盖掉了旧的
}
html>body .content { //html>body是css2的写法
width:300px; //支持css2该写法的浏览器(非ie5)有幸读到了这一句
}

div.content {
width:300px !important; //这个是正确的width，大部分支持!important标记的浏览器使用这里的数值
width(空格)/**/:400px; //ie6/win不解析这句，所以ie6/win仍然认为width的值是300px；而ie5.x/win读到这句，新的数值(400px)覆盖掉了旧的，因为!important标记对他们不起作用
}
html>body .content { //html>body是css2的写法
width:300px; //支持css2该写法的浏览器有幸读到了这一句
}

具体解释点击下面链接查看

www.blueidea.com/tech/site/2006/3170.asp
www.jluvip.com/blog/article.asp?id=114

列等高技巧

n行n列布局，每列高度（事先并不能确定哪列的高度）的相同，是每个设计师追求的目标，做法有：背景图填充、加js脚本的
方法和容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法。

背景图填充法：

xhtml:

<div id="wrap">
<div id="column1">这是第一列</div>
<div id="column1">这是第二列</div>
<div class="clear"></div>
</div>

css:

#wrap{ width:776px; background:url(bg.gif) repeat-y 300px;}
#column1{ float:left; width:300px;}
#column2{ float:right; width:476px;}
.clear{ clear:both;}

就是将一个npx宽的一张图片在外部容器纵向重复，定位到两列交错的位置纵向重复，在视觉上产生了两列高度一样的错觉

js脚本法：

www.blueidea.com/bbs/newsdetail.asp?id=2453983
代码的原理基本就是这样，读取高度，判断高度，高度相等。

容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法

这篇文章说的很详细了：

www.blueidea.com/tech/web/2006/3210.asp

还有：

www.jluvip.com/blog/article.asp?id=151

满屏高度布局（最窄770px最宽1024px经典布局）

www.blueidea.com/tech/web/2005/3124.asp

今天和一个网友两天，他提到：给一个外国公司做网站，要求1.800x600满屏。2.1024x767满屏。3.1280下居中。4.不许用js。
我突然想起了这篇文章，哈哈！把它感觉不可思议的事情解决了！但是好像对于ie5有点问题啊！

经典论坛讨论帖：
http://www.blueidea.com/bbs/newsdetail.asp?id=2506047


 


关键字 本文所属关键字

相关 与本文相关文章

分类 所有文章关键字导航

源码编程相关

Java   Asp   PHP   .Net   XML   C/C++   CGI   VB   Jsp   J2ee   J2se   J2me   EJB   Servlet   Tomcat   Resin   Struts   Weblogic   Eclipse   ANT   GUI   JMS   Web servise   IDEA   Webphere   Hibernate   Spring   Jboss   Applet   Swing   Socket   Javamail   Perl   Ajax   P2P   安全   模式   框架   测试   开源   游戏

SQL数据库相关

My-SQL   Ms-SQL   Access   DB2   Oracle   Sybase   SQLserver   索引   存储过程   加密   数据库   分页   视图  

手机无线相关

3G   Wap   CDMA   GRPS   GSM   IVR   彩信   短信   无线   增值业务

网页设计制作相关

HTML   CSS   网页配色   网页特效   Javascript   VBscript   Dreamweaver   Frontpage   JS   Web   网站设计

网站建设推广相关

建站经验   网站优化   网站排名   推广   Alexa

操作系统/服务器相关

Windows XP   Windows 2000   Windows 2003   Windows Me   Windows 9.x   Linux   UNIX   注册表   操作系统   服务器   应用服务器

图形图像多媒体相关

Photoshop   Fireworks   Flash   Coreldraw   Illustrator   Freehand   Photoimpact   多媒体   图形图像

标准 网站致力的规范

Valid CSS!

无不良内容，无不良广告，无恶意代码

Valid XHTML 1.0 Transitional

creativecommons