圣杯布局，双飞翼布局及其优缺点

圣杯布局与双飞翼布局的优点：利用布局，可优先渲染主要部分

不同点：

    圣杯布局：借助的是其他非主要元素覆盖了其父元素的padding值所占据的宽度，同一个杯子，非主要元素其只是占据了全部容器的padding值部分；

    双飞翼布局：给主要部分main-wrap添加一个外层元素main，其他非主要元素所占据的空间是主要部分(main-wrap)的margin空间，像鸟的两个翅膀，与主要部分main脱离(main和main-wrap是下面双飞翼布局的元素id)。

圣杯布局

      
      
          
              
              
              
          
          
            
  
                
main
 
                
left
  
                
right
  
            
  
          
      

圣杯布局的缺点：正常情况下是没有问题的，但是特殊情况下就会暴露此方案的弊端，如果将浏览器无线放大时，「圣杯」将会「破碎」掉。如图，当main部分的宽小于left部分时就会发生布局混乱。

双飞翼布局

目的：为了优先显示中间主要部分，浏览器渲染引擎在构建和渲染渲染树是异步的（谁先构建好谁先显示），故在编写时，先构建中间main部分，但由于布局原因，将left置于center左边，故而出现了双飞翼布局。

缺点是：多加了一层dom节点

      
      
          
              
              
              
          
          
            
  
                
  
                    
 #main 
  
                
  
                
#left
  
                
#right
  
            
  
          
      

像这样的布局，也可以使用定位完成

定位

    
        
        
        
    
    
        
header
        

            
main
            
left
            
right
        
        
footer
    

运行结果为：

结果正常，将main更改后结构层正常显示，但是将其left与right的高度改为300px后，结果如下：

出现了异常，故而总结得到定位非主要元素，撑不起整个高度

三个布局方法，有优点也有缺点：

当中有借鉴并学习了其他网站比较好的观点，也有自己的理解，如有不对的地方，希望大家多多指点！