css2.1——三列布局、圣杯布局、双飞翼布局、伪等高布局

三列布局

（1）两边固定 当中自适应
（2）当中列要完整显示
（3）当中列要优先加载

1. 定位方式（不好，下面说明原因）

    
        
        
        
    
    
        
left
        
middle
        
right
    

当改变浏览器大小后，middle内容会被压缩掉

image.png

2. 浮动方式

    
        
        
        
        
    
    
        
left
        
right
        
middle
   
    

缺点：网页最后加载middle,用户体验差

总结

定位会提升层级，对以后页面编写带来困扰，不建议用定位对网页做框架上的布局。
浮动实现无法实现主列middle的优先加载
因此引出圣杯布局

3. 圣杯布局

• 使用浮动:搭建完整的布局框架
• 使用margin 为负值:调整旁边两列的位置(使三列布局到一行上)
• 使用相对定位:调整旁边两列的位置（使两列位置调整到两头）
  完整代码：

    
        
        
        
    
     
        
header
        

            
middle
            
left
        
            
right
      
        
        
footer
    

效果：

image.png

4. 伪等高布局

解决高度不统一问题

image.png

添加代码

#content .left,#content .right,#content .middle{
                padding-bottom: 10000px;
                margin-bottom: -10000px;
            }

#content{
                overflow: hidden; 
            }

完整代码为：

    
        
        
        
    
     
        
header
        

            

                
middle
                
middle
                
middle
                
middle
                
middle
                
middle
                
middle
                
middle
                
middle
                
middle
            
            

                
left
                
left
                
left
                
left
                
left
            
      
            
right
      
        
        
footer
    

效果为

image.png

5. 双飞翼布局

双飞翼、圣杯实现的对比:

• 俩种布局方式都是把主列放在文档流最前面，使主列优先加载。
• 两种布局方式在实现上也有相同之处，都是让三列浮动，然后通过负外边距形成三列布局。
• 两种布局方式的不同之处在于如何处理中间主列的位置：
  圣杯布局是利用父容器的左、右内边距+两个从列相对定位；
  双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左、右外边距进行布局调整
  双飞翼布局完整代码：

    
        
        
        
    
    
        

            
header
        
        

            

                

                    middle
                
            
            
left
            
right
        
        

            
footer