一、布局和定位

布局和定位:搭建一个可视框架，框架在页面的显示位置和浮动方式。
CSS布局方式有两种：浮动布局和定位布局
了解Div
 Div是XHTML中指定的、专门用于布局设计的容器对象。
 Div对象本身是占据整行的一种对象，不允许其它对象与之共存一行中；

 PS:XHTML中的对象类型：
       block块状对象-当前对象显示为一个方块。默认显示状态下，它将占据整行，其它的对象只能在下一行显示。
       in-line行间对象（内联对象）-它允许下一个对象与之共享一行显示。

一列固定宽度、一列宽度自适应
 #layout{background-color:#cccccc;border:2px solid #333333;width:300px;height:300px;margin:0px auto;}
 #layout{background-color:#cccccc;border:2px solid #333333;width:80%;height:300px;}

 

二列固定宽度、二列宽度自适应
 #left{background-color:#cccccc;border:2px solid #333333;width:300px;height:300px;float:left;}
 #right{background-color:#cccccc;border:2px solid #333333;width:300px;height:300px;float:left;}

 

 #left{background-color:#cccccc;border:2px solid #333333;width:20%;height:300px;float:left;}
 #right{background-color:#cccccc;border:2px solid #333333;width:70%;height:300px;float:left;}

 

两列右列宽度自适应 
 #left{background-color:#cccccc;border:2px solid #333333;width:100px;height:300px;float:left;}
 #right{background-color:#cccccc;border:2px solid #333333;height:300px;}

 

二列固定宽度居中
 #layout{margin:0px auto;width:408px;}
 #left{background-color:#cccccc;border:2px solid #333333;width:200px;height:300px;float:left;}
 #right{background-color:#cccccc;border:2px solid #333333;width:200px;height:300px;float:left;}

 

 <div id="layout">
  <div id="left">Left</div>
  <div id="right">Right</div>
 </div>

 

三列浮动中间列宽度自适应
     #left{background-color:#cccccc;border:2px solid #333333;width:100px;height:300px;positon:absolute;top:0px;left:0px;}
    #right{background-color:#cccccc;border:2px solid #333333;width:100px;height:300px;right:0px;top:0px;}
    #center{background-color:#cccccc;border:2px solid #333333;height:300px;margin-left:104px;margin-right:104px;}
 
 <div id="left">Left</div>
 <div id="center">center</div>
 <div id="right">right</div> 

 

   Clear 浮动:

     #left{background-color:#cccccc;border:2px solid #333333;width:200px;height:300px;float:left;}
 #right{background-color:#cccccc;border:2px solid #333333;width:200px;height:300px;float:left;clear:float;}

 

高度自适应
     一个对象的高度是否可以使用百分比显示，取决于对象的父级对象。
 #left{background-color:#cccccc;width:300px;height:100px;float:float;}

 

盒模型详解(Box Model)
 盒模型-是由一组属性值组合而成；包括：高度、宽度、内边距(padding)、外边距(margin)、边框(border)
 ie6/ie7/firefox的最终宽度=左外边距 + 左边框宽 + 左内边距 + 宽度 + 右内边距 + 右边框宽 + 右外边距

深入浮动(Float)
 一种常用的布局方式，能够改变页面中对象的前后流动顺序，使排版更具有良好的伸缩性
 文档流-对于一个HTML网页，body元素下的任意元素，根据其前后顺序，组成一个个上下关系
 浮动布局打破“文档流”模式；
 何时选用浮动定位:对分辨率及内容大小的适应能力有较强要求。

 

绝对定位与相对定位
 绝对定位－通过设置对象的top、right、bottom和left四个方向的边距值来实现

 #a,#b,#c,#d{background-color:#cccccc;border:2px solid #333333;width:100px;height:100px;margin:2px 2px 2px

0px;float:left;}
 #b{position:absolute;top:80px;left:100px;z-index:1;}
 #d{position:absolute;top:80px;left:210px;z-index:0;}

 

 相对定位使得被设置元素保持与其原始位置相对，并不破坏其原始位置的信息
 占位相对定位
 #a,#b,#c,#d{background-color:#cccccc;border:2px solid #333333;width:100px;height:100px;margin:2px 2px 2px

0px;float:left;}
 #b{position:relative;left:50px;top:50px;}

 不占位的相对定位
 #divGroup{margin:50px 0 0 50px;position:relative;border:1px solid #000;width:400px;height:200px;}
 #a,#b,#c,#d{background-color:#cccccc;border:2px solid #333333;width:100px;height:100px;margin:2px 2px 2px

0px;float:left;}
 #b{position:absolute;left:100px;right:100px;}