使用DIV+CSS布局页面——1

1.什么是div

        div是一个容器。在HTML页面中的每个标签对象几乎都可以称得上时个容器，例如使用<p>段落的标签。

<p>段落</p>

        <p>标签作为一个容器，其中放入了内容。同样的，div也是一个容器，能够放置内容，例如：

	<div>
		文档内容
	</div>

        在传统的表格样式的布局当中，之所以能进行页面的排版布局设计，完全依赖于表格对象 table。在页面当中绘制一个有多个但愿个组成的表格，在相应的表格中放置内容，通过表格单元的位置控制，到达实现布局的目的，这是表格布局的核心。这里介绍的则是一种全新的布局方式——CSS布局。div是这种布局的核心，只用CSS布局的页面排版不需要依赖表格，做一个简单的布局只需要依赖DIV与CSS，因此也可以称为DIV+CSS布局。

2.插入DIV

        与其他HTML对象一样，只需要在代码中应用<div>...</div>这样的标签样式，将内容放置其中，便可以应用div标签。

        div对象出了可以直接放入文本和其他标签，也可以将多个Div标签进行嵌套使用，最终的目的是合理标识出页面的区域。

        在使用DIV对象的时候，同其他HTML对象一样，可以加入其他属性，如：id、class、align、style等，而在CSS页面布局方面，为了实现内容与表现分离，不应将align对齐属性，以及style行间样式表属性编写在HTML页面的DIV标签中，因此，div代码只能拥有以下两种形式：

	<div id="id名称">
		
	</div>
	<div class="id名称">
		
	</div>

        使用id属性，可以为当前这个DIV指点一个id名称，在CSS中使用id选择器进行样式进行编写。同样使用class属性，在CSS中使用class选择器进行编写。

提示

同一名称的id值在当前HTML页面中，只允许使用一次，不管是应用到DIV中，还是应用到其他对象的id中，而class则可以重复使用。

3.div的嵌套和固定格式

        div可以进行多行嵌套使用，嵌套的目的为了实现更为复杂的页面排版，例如，当设计一个网页时，首先需要有整体布局，需要产生头部、中部和底部，这也许产生一个福州市的div结构。

	<div id="top">
		
	</div>
	<div id="main">
		<div id="left">
			
		</div>
		<div id="reight">
			
		</div>
	</div>
	<div id="bottom">
		
	</div>

     在diamante中，每个div定义了id名称已提供识别。可以看到id为top、main、bottom的3个对象，它们之间属于并列关系，一个接一个，在网页的布局结构中如果以垂直方向布局为例，代表的是如图一所示一种布局关系。而在main中，为了内容需要，有可能使用左右栏的布局样式，因在main中增加两个id分别为left和right的div。这两个div本身是并列关系，而他们都处于main中。因此他们与main形成了一种嵌套关系哦，如果left和right被样式控制为左右显示的话，那么他们最终的布局应是图2所示。

   

            图一                                                图二

        网页布局则由这些嵌套的DIV来构成，无论是多么复杂的布局方法，都可以使用DIV之间的并列与嵌套来实现。

CSS布局定位

1.浮动定位

    浮动定位是CSS排版中非常重要的手断。浮动的框可以左右移动，直到它的边缘碰到包含框或另一个浮动框的边缘。应为浮动框不在文档的普通流中，所以文档中的块框表现得就像浮动框不存在一样。float可选参数如下图：

float可选参数

提示：

        为什么要设置float属性呢？因为在网页中分行内元素和块元素，行内元素是可以显示在同行上的元素，例如<span>;

块元素是占据正行的空间元素，例如<div>。如果需要将两个<div>显示在同一行上，就需要使用float属性。

2.position定位

        在使用DIV+CSS布局制作网页的过程，都是通过CSS的定位属性元素完成位置和大小进行控制的。定位就是精确地定位HTML元素在页面中的位置，可以页面的决对位置，也可以是相对于附近元素或许另一个元素的相对位置。

        position属性是最主要的定位属性，position属性即可以元素的绝对位置，又可以定义元素的相对位置。position属性的语法格式如下：

position:static| absolute | fixed | relative

position可选参数下图

position可选参数

3.相对定位

        如果对一个元素进行相对定位（relative），那么在它所在的位置上，通过设置垂直或水平位置，让这个元素相对于起点进行移动。如果将top设置为40像素，那么相对定位的框架出现原位置顶部下面40像素的位置。如果将left设置为40像素，那么会在元素左边创建40像素的空间，也就是将元素向有移动。代码如下：

#main{
		width:400px;
		height: 400px;
		float: left;	
		border: 1px solid #FB0A0E;
		position: relative;
		left: 40px;
		top: 40px;

4.绝对定位

        相对定位实际被看作普通流定位模型的一部分，因此元素的位置相对于它在普通流中的位置。与之相反，绝对定位（absolute）使用了绝对之后，对象就浮在网页的上面。代码如下：

#main{
		width:400px;
		height: 400px;
		float: left;	
		border: 1px solid #FB0A0E;
		position: absolute;
		left: 40px;
		top: 40px;
	}

        与相对定位的框一样，决定定位的框可以从他的包含向上、下、左、右移动这提供了很大的灵活性，可以直接将元素定位在页面上的任何位置。

5.悬浮定位

        设置position属性为fixed，即可将元素的定位方式设置 为固定（fixed）。固定位和决定位比较相似，它是绝对定位的一种特殊形式，固定定位的容器不会随着拖动滚动条而变化位置。在视线中，固定定位的容器不会改变的。固定定位可以把一些特性效果固定在浏览器的视线位置。

        在CSS样式中设置了position属性后，还可以对其他的位置进行设置，包括width、height、z-index、top、right、bottom、left、overflow和clip，其中top、right、boottom和left只有position属性中使用才起作用。

（1）top、right、bottom和left

        top属性用于设置元素垂直距顶部的距离；right属性用于设置元素水平距离右部的距离；bottom属性用于设置元素水平水平距左部的距离。

（2）z-index

            z-index属性用于设置元素层叠顺序。

（3）width和height

        width属性用于设置元素的宽度；height属性用于设置元素的高度。

（4）overflow

           overflow属性用于设置元素内容溢出的处理方法。

（5）clip

        clip属性用于设置元素的剪切方法