基于DIV和CSS的布局结构（1）

基于DIV和CSS的布局结构（1）

DIV在HTML中是一个块级元素，所以它很适合用来建设网页的结构。2000年互联网泡沫之后，CSS流行起来。虽然距离CSS发布已经有很长的一段时间，但它有限的浏览器支持使得开发人员害怕使用它。相对于表格结构，它有相对更高的学习曲线，开发人员必须了解CSS并且清楚地知道CSS间的块级元素和内联元素、何时使用相对定位、何时使用绝对定位来解决浏览器的定位问题，还需了解每个CSS特性在不同浏览器中的不同表现（这点在3.1节中已经提到过）。我们重新审视一下关于Web标准的三个部分：结构(Structure)、表现(Presentation)、行为(Behavior)，见图3-12。

图3-12? Web标准的三个核心元素

我们需要还原HTML最初的面貌，用它来描述文档的结构，并且掌握CSS的布局技术来实现页面的排版布局。在设计这种标准的网页时，我们应该先抛去外观，外观在这个时候并不是最重要的，一个结构良好的HTML结构页面可以以任何外观表现出来。如果认真地思考网页所包含的内容，你会发现，你规划的页面结构会包含类似以下几点内容：

标志和站点名称

站点导航（包括子菜单）

搜索框

功能区

边栏

页脚

我们通常使用DIV这个HTML块级元素将这些结构定义出来，如：

	
<div?id="header"></div><!—头部

	
<div?id="nav"></div>
	
<div?id="search"></div>
	
<div?id="conent"></div>
	
<div?id="slidebar"></div>
	
<div?id="footer"></div>

DIV不是一个视觉元素，每个开发人员都知道表格最后的展现是怎样的，但对DIV则并不明确。使用DIV来描述结构能增强网页文档的阅读性，即使在没有CSS的情况下，也能够被正常显示及阅读。

以DIV和CSS作为布局结构时，需要强调两个原则：首先要结构清晰、简洁；其次必须要有语义。这两个原则将为自己及团队带来利益，每个开发人员都不愿看到一大堆凌乱的标记。下面将从几个方面来提醒大家在使用DIV这样的结构时应注意的地方。

1．清除不必要的DIV标记

在HTML标记中，所有标记可按性质分为块元素及内联元素。块元素(block element)一般是其他元素的容器元素，一般都从新行开始，它可以容纳内联元素和其他块元素，常见块元素是段落标签“P”。 如果没有CSS的作用，块元素会顺序地以每次另起一行的方式一直往下排。而有了CSS以后，我们可以改变这种HTML的默认布局模式，把块元素摆放到你想要的位置上。内联元素（inline element）一般都是基于语义级（semantic）的基本元素。内联元素只能容纳文本或者其他内联元素，常见的内联元素是”a”。块元素和内联元素都是HTML规范中的概念。

块元素和内联元素的基本差异是：块元素一般都从新行开始。而加入了CSS控制以后，块元素和内联元素的这种属性差异就不存在差异了。比如，完全可以为内联元素“cite”加上“display:block”这样的属性，让它也有每次都从新行开始的属性，但是在结构上必须使用对应的元素来描述。

常见的块元素如下：

	
address,?blockquote,?div,?dl,?fieldset,?form,?h1-h6,?hr,?
noframes,?noscript,?ol,?p,?pre,?table,?ul?center,?dir,?isindex,?menu

常见的内联元素如下：

	
a,?abbr,?acronym,?b,?bdo,?big,?br,?button,?cite,?code,?dfn,
em,?i,?img,?input,?kbd,?label,?map,?object,?q,?samp,?script,?
select,?small,?span,?strike,?strong,?sub,?sup,?textarea,?tt,
var?,basefont,?font,?s,?u

在描述结构时，可以去除一些常见的嵌套块元素，由CSS实现相同的效果。下面通过两个示例来说明。

示例1：

	
<div?class="contactform">?<form?class="contactform">
	
<form>?=?…
	
….?</form>
	
</form>
	
<div>
	
div.contactform{?.contactform{
	
margin:20px?10px;?margin:20px?10px;
	
border:1px?solid?#ccc;?border:1px?solid?#ccc;
	
background:#fff;?background:#fff;
	
}?}

示例2：

有时候我们使用DIV来控制与其他元素之间的间距，但如果在一个包容体内存在一个标题，则可以利用标题(h4)来控制间距，如下所示：

	
<div?id="sidebar">?<div?id="sidebar">
	
<div?class="box">?<h4>标签云</h4>
	
<h4>标签云</h4>?…内容
	
…内容?=?<h4>分类</h4>
	
<div>?…内容
	
<div?class="box">?</div>
	
<h4>分类</h4>
	
…内容
	
</div>
	
</div>