CSS圣杯布局和双飞翼布局的区别是什么？

区别：圣杯布局给中间div分别设置左右内边距后，将左右两个div进行定位并设置right和left属性，以便不遮挡中间div；双飞翼布局直接在中间div内部创建子div用于放置内容，在该子div里分别设置左右外边距为左右两栏div留出位置。

    
        
        
        
    
    

        

            
middle
            
left
            
right


        

    

其中：

左右栏通过添加负的margin放到正确的位置了，此段代码是为了摆正中间栏的位置

#bd{
                padding: 0 200px 0 180px;
                height: 100px;
            }

中间栏的位置摆正之后，左栏的位置也相应右移，通过相对定位的left恢复到正确位置

#left{
                
                position: relative;
                left: -180px;
            }

中间栏的位置摆正之后，右栏的位置也相应左移，通过相对定位的right恢复到正确位置

#right{
                
                position: relative;
                right: -200px;
            }

双飞翼布局：

优点：不会像圣杯布局那样变形

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

    
        
       
        
     
     
         

             
middle
         
         
left
         
right
     
 
更多编程相关知识，请访问：编程入门！！
以上就是CSS圣杯布局和双飞翼布局的区别是什么？的详细内容，更多请关注其它相关文章！