CSS:层叠样式表（三）【DIV网页布局和定位】

一、DIV+CSS进行网页布局

1、网页布局的目的：

页面结构清晰、有条理、易读

2、如何布局：

   (1)确定"版心"：页面主体内容所在的位置。(通常在页面中水平居中)
   
   (2)分析页面中的模块：头部(header)、导航(nav)、焦点图(banner)、主体内容(content)、页面底部(footer)
   
   (3)控制页面中的模块：通过盒子模型，使用DIV+CSS进行模块的控制

3、页面元素的定位机制：

(1)流式布局：

按照元素的类型和在HTML源文件中出现的顺序进行定位

       A、块(block):从上到下依次排列
	   
	   B、水平布局(inline)：在一行中进行水平布局

(2)浮动(float)：

当元素浮动时，它将不再处于普通文档流中，相当于浮在文档之上，不占据空间，

            但是会缩短行框，产生文字环绕的效果

(3)绝对定位(position:absolute)：

通过页面坐标(页面左上角)的方式来定位元素。使用绝对定位后元素不会占用普通流空间

(4)相对定位(position:relative):

如果一个元素进行相对定位，它将以它所在的位置(即它在普通流中的位置)为初始点，

                然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的初始点进行移动
				
   注意：与定位相关的属性有left、top、right、bottom,这四个属性只有在使用了定位属性(position)后

         才有效;只能同时使用相邻的两个属性，不能同时使用相对的两个属性

4、布局中的常用属性：

(1)浮动属性(float)：

	选择器{
   
		float: 属性值;
	}

属性值	Value
left	左浮动
right	右浮动
none	不浮动(默认值)

例1：DIV+CSS,一列固定宽度并自动居中

	#layout{
   
		height: 120px;
		width: 1000px;
		background: red;
		margin: auto