CSS 常用布局方式，让你青铜到王者-白红宇

放图震贴

单栏布局


    复制代码

margin

代码实现


      
        
         
     
      header
     
    
            
      margin + max-width
      
      1.子元素 设定 margin: 0 auto; 指定宽度
      
      或者 父元素设定 margin: 0 auto; 指定最大宽度 子元素宽度百分百
      
      实用性：兼容性好，需指定宽度
    
     
    
     
      footer
     
  
    
复制代码

效果

inline-block + text-align

代码实现


      
        
         
     
      header
     
    
            
      inline-block text-align width max-width 兼容性好，需要设定父元素，且子元素需要指定宽度 
      
      1.设置 子元素 display:inline-block 最大宽度 和 宽度百分百
      
      2.父元素 text-align: center 
      
      实用性：兼容性好，需要设定父元素，且子元素需指定宽度 
    
     
    
     
      footer
     
  
    
复制代码

效果

flexbox

代码实现


      
        
         
     
      header
     
    
            
      flexbox
      
      1.父元素display:flex; 
      
      2.父元素 设定 子元素 排列方向 flex-direction: column;
      
      3.父元素 设定 子元素 根据交叉轴的对齐方式 align-items: center;
      
      4.子元素 设定宽度，最大宽度
      
      实用性：PC端ie9+ 移动端常用，写起来简洁明了
    
     
    
     
      footer
     
  
    
复制代码

效果

双栏布局


    复制代码

margin + float

代码实现


      
        
         
           
      left
    
     
    
           
      float + margin
      
      1.浮动左列
      
      2.右列自适应，且设置margin-left
      
      实用性：兼容性好，但是浮动后超出无法顶开父容器高度
    
     
  
    
复制代码

效果

float

代码实现


      
        
         
           
      left
    
     
    
           
              
       float + margin
        
       1.浮动左列 
        
       2.右列自适应, 右列负margin-left
        
       3.右列子元素正margin-left
        
       实用性：兼容性虽好，但是相当麻烦的方案，从布局角度看 右列 部分超到了 左列 部分，还额外需要一个子元素，父元素由于两个子元素都浮动，高度彻底塌陷，还额外需要清除浮动
      
      
    
     
  
    
复制代码

效果

float + overflow

代码实现


      
        
         
           
      left
      
      left
      
      left
      
      left
      
      left
      
      left
    
     
    
           
      float + overflow
      
      1.浮动左列，左列指定宽度
      
      2.右列overflow: hidden, 触发右列 BFC 模式
      
      3.父元素 overflow 之后，触发 BFC 模式，浮动后仍然可以撑开父容器高度
      
      实用性：兼容性好，较为常用的实现方式，基本没什么后遗症
    
     
  
    
复制代码

效果

表格布局

代码实现


      
        
         
           
      left
    
     
    
           
      表格布局
      
      1.父元素设置 display:table; table-layout:fixed; 设置宽度
      
      2.子元素设置 table-cell
      
      3.左列设置宽度
      
      实用性：不需要用到浮动，高度不会塌陷，且可以实现双边等高布局，但是也只会是等高布局，无法设置左右列边距
    
     
  
    
复制代码

效果

flexbox布局

代码实现


      
        
         
           
      left
    
     
    
           
      flexbox
      
      1.父元素 display:flex
      
      2.左列设置宽度，右列flex:1
      
      3.右列flex:1
      
      4.align-items: start; 设置为 start 就不撑满
      
      实用性：PC端IE9+，简洁明了的布局方式，可以通过控制 align-items 实现等高或者不等高。
    
     
  
    
复制代码

效果

网格布局

代码实现


      
        
         
           
      left
    
     
    
           
      网格布局
      
      1.父元素 设置 display:grid 
      
      2.父元素 设置 grid-template-columns: 200px 1fr; 实现 左列100px 右列自适应
      
      3.align-items: start; 设置为 start 就不撑满
      
      实用性：更加简洁，高效的二维布局方式，但是兼容性 ie11+ 还是相对蛋疼
    
     
  
    
复制代码

效果

三栏布局


      复制代码

圣杯布局

代码实现


      
        
         
           
      圣杯布局
      
      两边固定宽度，中间自适应
      
      1. 子元素都左浮动，父元素 padding 留出空间
      
      2. 中间元素宽度100%
      
      3. 左右元素相对定位 配合负边距
      
      缺点: 如果center部分宽度效于left部分，会造成布局塌陷，旁边两列不能自动填充高度
    
     
    
           
      left
    
     
    
           
      right
    
     
  
    
复制代码

效果

缺陷

双飞翼布局

代码实现


      
        
         
           
              
       双飞翼布局
        
       圣杯布局的优化，实现内容和布局的分离
        
       1.在圣杯布局的基础上
        
       2.设定 parent 元素的最小宽度
        
       3.center 元素再增加一个子元素来撑开双边
        
       优点: 避免使用了无用的定位，由于父元素使用了 overflow 三个部分都能撑开高度
        
       缺点: 增加了一个 inner 层
      
      
    
     
    
           
      left
    
     
    
           
      right
    
     
  
    
复制代码

效果

表格布局

代码实现


      
        
         
           
      left
    
     
    
           
      表格布局
      
      1.父元素 diplay:table
      
      2.子元素 display: table-cell
      
      3.左右两边设置宽度，中间元素不设置宽度
      
      优点: 实现等高布局，兼容性很好,如果需要兼容flex不能用的情况，优先考虑此种实现
      
      缺点: 无法设置栏边距，等高布局无法改变，对SEO不友好
    
     
    
           
      right
    
     
  
    
复制代码

效果

flexbox 布局

代码实现


      
        
         
           
      left
    
     
    
           
      flexbox布局
      
      1.父元素 diplay:flex
      
      2.左右两边 设置宽度
      
      3.中间元素 flex: 1
      
      4.父元素 align-items: stretch(填满)/start/end/center;控制是否填满等高
      
      优点：书写方便简洁，可以等高也可以不等高，基本就是一个属性设置的区别，移动端常用
      
      缺点：PC端IE10才开始支持
    
     
    
           
      right
    
     
  
    
复制代码

效果

网格布局

代码实现


      
        
         
           
      left
    
     
    
           
      网格布局
      
      1.父元素diplay:grid
      
      2.父元素设置 grid-template-columns
      
      3.align-items: stretch(填满)/start/end/center;控制是否填满等高
      
      优点：布局强大，二维布局能力出色，可以玩出很多骚操作。未来最流弊的布局方案了
      
      缺点：ie 谷歌一条街，打听打听谁是爹
    
     
    
           
      right
    
     
  
    
复制代码