认识DIV及基本布局的简单应用

创建时间：十二月 31th, 2007 Traffic(670)

前面已经说过，Web标准的网站最大的特点就是实现了数据与表现相分离。传统的Table布局因它的局限性很难实现。为达到这样的目的，人们开发了CSS，让它来处理表现方面的事情。理论上说，有了CSS的帮助，任何一个标签都可以作为容器出现。而此时我们要介绍的是一个在Web标准设计的网页中经常要用到的标签——DIV。

一、什么是DIV

DIV也是XHTML所支持的标签之一。在布局上，可以把DIV看成是一个大的容器，里面可以是内容也可以是其他的容器。DIV决定了整体页面的结构，而CSS决定了网页的表现，是排版、效果等不再依赖Table。开发一个简单局部的网页只需要DIV和CSS就可以了，所以也有人称之为Div+Css布局。

二、如何使用DIV

同其他XHTML标签一样，要有开始和关闭标签，如：<div></div>。也可以为其定义其他属性，如：id、class等。正确写法为：<div id="idName">...</div>或<div class="className">...</div>。

id是对象的选择符，用于指定具体的对象，在一个页面中id值是唯一的。如果遇到样式相同的多个标签（如宽高、浮动方式等），建议使用class定义，可以避免编写相同的CSS代码。

三、理解DIV

DIV既可以单独出现，也可以嵌套使用，但必须严格按照嵌套的顺序定义。当DIV单独出现时，如果没有CSS定义其浮动属性，则它会同H标签一样占用一整行显示，即使浏览器有1000px，而Div只有1px也是一样的。因为Div是一个block对象，即块级元素。如例：

而用行级元素（或称内联元素），如span标签就可以实现左右并列显示，如例：

如果要使Div各元素也可以在同一行上，可以设置Div标签的浮动CSS属性来实现，如例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS基础应用</title> <style type="text/css"> #left { float:left; width:150px; height:200px; border:1px #000000 solid; } #right { float:left; width:150px; height:200px; border:1px #000000 solid; } </style> </head> <body> <div id="left">左边内容</div> <div id="right">右边内容</div> </body> </html>

那么上面说了那么多浮动（float），究竟什么是float呢？float有什么作用呢？

四、什么是浮动（Float）

就好像上面的例子一样，如果定义了一个元素的浮动，那么其他的元素或文字则在其相反的方向做围绕。它的主要值有：left、right和none。使用了float:left后，由侧对象的内容将移动到当前对象的右侧；float:right则移动到当前对象的左侧。

使用了float属性后，如果不定义对象的宽和高，则大小由内容决定，最大宽度和高度由最外层容器决定。即自适应大小。

的确，就float的定义，直到现在也没有一个很明确的说法，只有做几个例子来帮助大家理解了。

（1）两列固定宽度

由于上面的两个Div的样式相同，则可以用相同的CSS代码，如：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS基础应用</title> <style type="text/css"> .all { float:left; width:150px; height:200px; border:1px #000000 solid; } </style> </head> <body> <div class="all">左边内容</div> <div class="all">右边内容</div> </body> </html>

当然，在此例中也可以不定义class名称，只用div {...}，但如果页面中有多个Div而且定义不同的时候就要选择用id和class的其中一种了。

（2）两列自适应宽度

一种是自适应内容的，如两层皆为根据内容多少来确定Div的宽高：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS基础应用</title> <style type="text/css"> .all { float:left; border:1px #000000 solid; } </style> </head> <body> <div class="all">左边内容</div> <div class="all">这是在右边的内容</div> </body> </html>

最大宽度为其父对象的宽，如横向显示不下，则自动改为纵向显示。

一种是自适应浏览器的，如设置左边的层占整个浏览器宽的20%，右边占50%，高同为200px：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS基础应用</title> <style type="text/css"> #left { float:left; height:200px; width:20%; border:1px #000000 solid; } #right { float:left; width:50%; height:200px; border:1px #000000 solid; } </style> </head> <body> <div id="left">左边内容</div> <div id="right">右边内容</div> </body> </html>

把上面的代码#right中的float:left;改为float:right;就可以看到左列在左，右列在右的效果。

（3）两列右侧自适应

有时候可能会遇到这样的布局，左侧为列表，宽度固定或自适应（假设为100px），右侧为内容，宽度自适应，则：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS基础应用</title> <style type="text/css"> #left { float:left; height:200px; width:100px; border:1px #000000 solid; } #right { height:200px; border:1px #000000 solid; } </style> </head> <body> <div id="left">左边内容</div> <div id="right">右边内容</div> </body> </html>

注意，因为Div默认为块级元素，占据一行，所以，不写宽度即默认随其父对象的宽度相同。如：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS基础应用</title> <style type="text/css"> #all { width:300px; } #left { float:left; height:200px; width:100px; border:1px #000000 solid; } #right { height:200px; border:1px #000000 solid; } </style> </head> <body> <div id="all"> <div id="left">左边内容</div> <div id="right">右边内容</div> </div> </body> </html>

细心的朋友可以看到，右侧的对象没定义float属性，中间有边距，而Firefox下就没有。这就是IE6的双边距BUG，而且可以告诉大家，IE6的BUG还很多，随着学习的深入，我们会将此问题逐个解决的。

（4）固定宽度居中

有时，网页要随浏览器的变化而变化，如在800X600下整屏显示，但在1024X768或更大的分辨率下就要居中，这时就用到了居中显示的属性。如：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS基础应用</title> <style type="text/css"> #all { margin:0 auto; width:300px; border:1px #000000 solid; } </style> </head> <body> <div id="all"> 居中显示内容 </div> </body> </html>

这里又涉及了margin属性。此属性是控制各对象之间的距离的。可分别定义，如：margin-top:1px。其它三边的写法为：margin-left、margin-right和margin-bottom。

其完整的格式为：margin:1px 2px 3px 4px;顺序为：上、右、下、左的顺序，代表距其它对象的距离是上为1px，右为2px，下为3px，左为4px。

若过上下间距相同，左右间距相同可简写为：margin:1px 2px;，代表距其它对象的上、下距离为1px，左、右距离为2px。

若四周距离相同，可简写为margin:5px;，代表此对象距其它对象的上下左右距离都是5px。

若为0px的可直接写0，不用加“px”。如：margin:0;，代表紧贴其它对象，没有间距。

本例中margin:0 auto;，因为此对象的父对象是body，所以也可以理解为设置页边距。上下为0，左右如果用auto（自动），则浏览器会自动计算宽度，平均分配。

（5）高度自适应

直接设置对象的高度为100%是不会产生任何效果的，高度还是会随内容的多少而定。要使高度和浏览器用户区一样高，也很简单，如例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS的简单应用</title> <style type="text/css"> html, body { margin:0; height:100%; } #all { width:200px; height:100%; background-color:#CCCCCC; } </style> </head> <body> <div id="all">高度自适应</div> </body> </html>

设置页边距为0，如若不然，有页边距就会出滚动条了。all对象的border是定义边框的，若定义了四周为1px的话，则就要加上2px了（上、下各1px），也会出滚动条的。

关键还是在于设置html和body的高为100%。html是对Firefox起作用，但对IE无效；body则正相反。要使两个浏览器的效果一致，则就要都加上。

需要知道的是，当对象定义的宽或高超出了浏览器的宽或高时，会出现横向或纵向的滚动条。

到这里，我们对什么是Web标准，XHTML、CSS的代码规则和DIV的基本应用有了一个大概的了解了，接下来的文章，我们会用实例来说明CSS各属性的用法。

Posted by: 近水社区

相关文章：

理解CSS盒模型（Traffic：707 | Posted By：近水社区）

相关模板：

暂无相关模板

上一篇：CSS效验的常见错误下一篇：理解CSS盒模型

Comments(0)

暂无留言。

认识DIV及基本布局的简单应用

Comments(0)

话题搜索

文章推荐

留言修改：