概要

页面布局是项目开发首要考虑的问题，做好页面的布局就相当于房子有了一个稳定的地基，所以掌握常用的页面布局的使用场景和原理是十分必要的。

两栏布局

左侧固定宽度, 右侧自适应

代码

效果

右侧固定宽度, 左侧自适应

代码

效果

三栏布局

方式1: float布局

代码

  
  
  
  
  


  

    

    

    

      
浮动布局
    
  

效果

注意: 很多前端同学在做页面开发的时候都遇到过这样的问题。给一个div内部的div设置一个margin-top，结果它的父级跟着它一起下移了。css在盒模型中规定：所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻的定义为：同级或者嵌套的盒元素，并且它们之间没有非空内容、Padding或Border分隔。通俗解释就是: 父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自 己“领导”(父元素，祖先元素)的麻烦。只要给领导设置个有效的 border或者padding就可以有效的管制这个目无领导的 margin 它越级，假传圣旨，把自己的margin当领导的margin执行。

解决方法

• 让父级具有“包裹性”
• 将父级over-flow设为hidden
• 将父级display设为inline-block
• 将父级float或absolute
• 改变父级的结构
• 给父元素设置padding
• 给父元素设置透明border

方式2: Position布局

代码

  
  
  
  
  


  

    

    

      
绝对定位布局
    
    

  

效果

方式3: table布局

代码

  
  
  
  
  


  

    

    

      
table布局
    
    

  

效果

方式4: 弹性(flex)布局

代码

  
  
  
  
  


  

    

    

      
flex布局
    
    

  

效果

方式5: 网格(gird)布局

代码

  
  
  
  
  


  

    

    

      
grid布局
    
    

  

效果

圣杯布局

代码

  
  
  
  
  


  

    

      
圣杯布局
    
    
left
    
right
  

效果

双飞翼布局

代码

  
  
  
  
  


  

    

      

        
双飞翼布局
      
    
    
left
    
right
  

效果

原文：https://www.cnblogs.com/smart-elwin/p/15096824.html