流式布局、圣杯布局、双飞翼布局你必须知道的知识！

前言：

搞前端必须知道的布局，工作中必会用到，面试必会考到！

流式布局：

页面划分份数时候使用百分比，页面上各种元素的宽也都使用百分比，同时搭配 max-width、min-width使用。这种布局用于早期移动端，屏幕尺寸差异不大

缺点：页面元素宽度是百分比，但是页面的字体等元素大小是固定的px，导致屏幕如果过大的话，虽然元素被拉伸边长了，但是字体没有变大，导致页面显示非常不协调。

 

  

 

圣杯布局

 

两侧宽度固定，中间宽度自适应的“三栏布局”

 

 

 

实现步骤：

 

编写DOM代码：

 

        
header
        

            
center
            
left
            
right
        
        
footer
    

 

• 为了保证中间区域优先显示，所以将 id 为center的div优先放到前边，优先加载
• 其中 container 容器中 包裹着 center 、 left 、right 容器

 

样式代码：

 

• 将 center、left、right 全部浮动
• 同时设置container宽度为100%，设置左右padding值，为了给 left 和 right 留出位置
• 因为container浮动会导致 footer 位置异常，所以需要清除浮动

 

#container,#left,#right{
    float:left;
}
#container{
    width:100%;
  padding:0,200px;
}
footer{
    clear:both;
}

 

 

• 开始调整 left 的位置，首先将其 设置 负边距 调整到和 center 相同的位置
• 然后 通过 设置 position：relative ，在设置 right 属性，使其 到达屏幕左侧位置
• 设置margin-left 为 负值 可以将元素往前拖动，达到 center的位置！
• margin-left ：-100%， 移动的距离 根据 父级元素的宽度计算，移动的宽度就是父级元素的宽度

 

#left{
   width:200px;
   margin-left:-100%;
   position:relative;
   right:200px;
}

 

• 给 right 元素进行位置的赋值
• margin-right：-200px
• 这里 大家不要搞混，其实 left 、right、center 在一条线上，因为 container宽度 不够所有的元素都在一条直线上，因此left 和right 会被挤下来
• 所以，想让 right 跑到屏幕右侧，只需要将其拉扯到 屏幕右侧即可，就是 margin-right：-200px对其进行位置的设置即可

 

 

#right {
    margin-right:-200px;
}

 

 

最终代码

    
        
    
    
    
        
header
        

            
center
            
left
            
right
        
        
footer
    

 

双飞翼布局

 

两侧宽度固定，中间宽度自适应的“三栏布局”

 

实现步骤：

 

编写DOM代码：

 

• 和圣杯布局不同的是，container 容器只是包裹 center 元素，且 container 容器进行浮动
• left 和 right 都在 container 容器外部浮动

 

        
header
        

            
center
        
        
left
        
right
        
footer
    

 

样式代码：

 

• container 、 left 、righ 都进行浮动
• container 容器内的 center 设置 margin-left 和 margin-right 预留 左右 的空隙
• left 元素 设置 margin-left : -100% ,将其移动到 屏幕最左侧
• right 元素 设置 margin-left：-200px 将其移动到屏幕最右侧

最终代码：

    
        
    
    
    
        
header
        

            
center
        
        
left
        
right
        
footer
    

flex 实现 三栏布局

 

实现结构和圣杯布局相似，但是更加简单

 

最终代码：

 

    
        
    
    
    
        
header
        

            
center
            
left
            
right
        
        
footer
    

感谢观看，如有疑问，请在评论区中，回复！