css圣杯布局和双飞翼布局(前端面试重点)

css圣杯布局和双飞翼布局(前端面试重点)

1.圣杯布局：左右固定，中间自适应(中间先解析)

原理：1.大盒子里面有三个小盒子，左右两边盒子固定，中间的盒子宽度为100%，中间一定要先解析，放在最上面。

           2.三个小盒子加浮动，左侧小盒子设置margin-left:-100%; 右侧小盒子设置margin-left:-自身宽度

           3.大盒子设置左右的padding，左右两个小盒子用相对定位定位到两侧位置

    
    
    
    



    

        
center
        
left
        
right
    

2.双飞翼布局：左右固定，中间自适应(中间先解析)

原理：1.大盒子里面有三个小盒子，左右两边盒子固定，中间的盒子宽度为100%，中间一定要先解析，放在最上面。

           2.三个小盒子加浮动，左侧小盒子设置margin-left:-100%; 右侧小盒子设置margin-left:-自身宽度

           3.中间内部嵌套一个子盒子，加左右外边距，

缺点：相对于圣杯布局。增加了结构代码。

    
    
    
    



    

        

            
1
        
        
2
        
3