第三天 二列和三列布局

二列和三列布局，将涉及到以下内容和知识点

1、二列自适应宽度
2、二列固定宽度
3、二列固定宽度居中
4、xhtml的块级元素(div)和内联元素(span)
5、float属性
6、三列自适应宽度
7、三列固定宽度 三列固定宽度居中
8、IE6的3像素bug

 

二列和三列布局，将涉及到以下内容和知识点

1、二列自适应宽度
以常见的左列固定右列自适应为例，因为div为块状元素，默认情况下占据一行的空间，要想让下面的div跑到右侧，就需要做助css的浮动来实现。

此处显示 id "side" 的内容

此处显示 id "main" 的内容

2、二列固定宽度
两列固定宽度就容易多了，只需要把#main的宽度由百分比改为固定值，
#main { background: #99FFFF; height: 300px; width: 500px; margin-left: 120px; }
3、二列固定宽度居中
两列固定宽度居中，需要在两列固定宽度的基础上改进，在学一列固定宽度居中时，我们知道让它居中的方法，所以这里需要在这两个div之外再加一个父div：

 

此处显示 id "side" 的内容

 

此处显示 id "main" 的内容

4、xhtml的块级元素(div)和内联元素(span)
块级元素：就是一个方块，像段落一样，默认占据一行出现；如div就是一个块元素。

内联元素：又叫行内元素，顾名思义，只能放在行内，就像一个单词，不会造成前后换行，起辅助作用。

一般的块级元素诸如段落

、标题

...、列表,

1. 、表格、表单、DIV
   和BODY等元素。而内联元素则如: 表单元素、超级链接、图像、 ........ 块级元素的显著特点是：每个块级元素都是从一个新行开始显示，而且其后的元素也需另起一行进行显示。在样式定义的时候，块级元素不以#开始，内联元素以#开始。可以用css的display:inline将块级元素改变为内联元素，也可以用display:block将内联元素改变为块元素。

   5、float属性（重点，灵活性在这里体现）
   在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素；且要指明一个宽度，否则它会尽可能地窄；另外当可供浮动的空间小于浮动元素时，它会跑到下一行，直到拥有足够放下它的空间。
   

   
   

   标准之路[]提供DIV+CSS教程,DIV+CSS视频教程,web2.0标准,DIV+CSS布局入门教程,网页布局实例,css布局实例,div+css模板,div+css实例解析,网站重构，网页代码,水晶图标,幻灯广告图片.教程适合初学者循序渐进学习!

   
   显示的结果是两行。
   以下两行让side浮动起来，靠左；
   body { font-size:18px; line-height:200%; }
   #side { float:left;}
   
   但这里的文字和图片右侧贴的很近，怎么办呢？刚才已经说了，当元素浮动过之后，需要指定一个宽度，否则它会尽可能窄。那么把side的宽度设置为大于图片的宽度，它们中间应该就有空隙了。图片的宽度是192px，设置side为202px，中间将会有10px的空隙了。
   body { font-size:18px; line-height:200%; }
   #side { float:left; width:202px;}
   #main的div还定义了margin-left:120px;而这里没有定义，但它多出的文字却跑到了图片(#side)的下方，是不是设置margin-left:后，它就不会跑到#side的正文呢？
   #main { margin-left:202px;}
   确实如此。
   
   6、三列自适应宽度
   三列自适应宽度，一般常用的结构是左列和右列固定，中间列根据浏览器宽度自适应。
   
   

   
   

   
   

   此处显示 id "side" 的内容

   
   

   此处显示 id "side1" 的内容

   
   

   此处显示 id "main" 的内容

   
   
   
   7、三列固定宽度 三列固定宽度居中
   三列固定宽度可以在三列自适应基础上添加一个父div，并设置这个div的宽度即可，
   三列固定宽度出来了，要想实现三列固定宽度居中就更方便了，只需设置#content {margin:0 auto;}即可

   8、IE6的3像素bug
   3像素bug是IE6的一个著名的bug，当浮动元素与非浮动元素相邻时，这个3像素的Bug就会出现。
   body { margin:0;}
   #side { float: left; background:#99FF99; height: 300px; width: 120px;}
   #main { background: #99FFFF; height: 300px;}

   html代码如下：

   此处显示 id "side" 的内容

   
   

   此处显示 id "main" 的内容

   
   在ie6.0与7.0下显示的结果不一样，中间会有一个3px的宽度空白地带。
   那么要解决这个问题，请在#side上加上_margin-right:-3px;记住，前边加上一下划线，这样这个样式专门针对IE6生效。IE7和FF下还会正常显示。

   body { margin:0;}
   #side { float: left; background:#99FF99; height: 300px; width: 120px; _margin-right:-3px;}
   #main { background: #99FFFF; height: 300px; }

    

   阅读(1730) | 评论(0) | 转发(0) |
   0

   上一篇：第二天 一列布局

   下一篇：CDN（内容分发网络）技术原理

   给主人留下些什么吧！~~

   评论热议

   请登录后评论。

   登录 注册
   关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

   Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

   感谢所有关心和支持过ChinaUnix的朋友们

   16024965号-6