图解 CSS布局和定位

1 . 布局与定位概述

2 . 盒子模型（I）

2 . 盒子模型（II）

3 . CSS定位机制概述

4 . 文档流定位

5 . 浮动定位

<style>
        <!--对浏览器默认样式清零-->
    *{           
         padding: 0;            
         margin: 0;        
     }        
     body{            
         font-size: 14px;        
     }        
     #container{            
         margin: 0 auto;
         width: 400px;            
         height: 200px;            
         /*background-color: #6cf;*/       
     }        
     #header{            
         height: 40px;            
         background-color: #6cf;            
         margin-bottom: 5px;        
     }        
     #main{            
         height: 200px;            
         background-color: #cff;            
         margin-bottom: 5px;        
     }        
     #footer{            
         height: 25px;            
         background-color: #6cf;            
         margin-bottom: 5px;        
     }    
 </style>

6 . 层定位