CSS布局技巧大全

参考资料：
http://www.imooc.com/article/2235

单列布局

水平居中

1. 父元素text-align:center;子元素：inline-block;

• 优点：兼容性好；
• 不足：需要同时设置子元素和父元素

1. 子元素margin:0 auto;

• 优点：兼容性好
• 缺点：需要指定宽度

1. 子元素{display:table;margin:0 auto;}

• 优点:只需要对自身进行设置
• 不足:IE6,7需要调整结构

1. 父元素：relative；子元素：absolute；left:50%;margin-left:-宽度的一半

• 优点：兼容性好
• 缺点：需要知道子元素的宽度

1. 父元素：relative；子元素：absolute；left:50%;transform:translate(-50%,0);

• 优点：兼容性差
• 缺点：不需要知道子元素的宽度

1. 弹性盒子：父元素：display:flex;justify-content:center;

• 优点：简单
• 缺点：兼容性差

垂直居中

1. vertical-align:center;

1. 父元素：position:relative;子元素：positon:absolute;top:50%;transform:translate(0,-50%);

1. 父元素：position:relative;子元素：positon:absolute;top:50%;margin-top:-子元素高度的一半;

2. 父元素：display:flex;align-items:center;

水平垂直居中

1. 父元素：display:table-cell;vertical-align:middle;text-align:center;
   子元素；display:inline-block;

1. 父元素：position:relative;
   子元素：position:absolute?50%;left:50%;margin-left:宽度的一半；margin-top:高度的一半；或者transform:translate(-50%,-50%);

1. 父元素{display:flex;justify-content:center;align-items:center;}

多列布局

左侧定宽，右侧自适应

1. .left{float:left;width:100px;}
   .right{margin-left:100px;}

  
  
  
  
  


  
left
  
right

  
  
  
  
  


    

      

        left
      
      

        

          right
        
      
    

1. .left{width:宽度值;float:left;} .right{overflow:hidden;}

  
  
  
  
  


    

      

        left
      
      

        right
      
    

1. table实现

  
  
  
  
  


    

      

        left
      
      

        right
      
    

1. flex实现

  
  
  
  
  


    

      

        left
      
      

        right
      
    

右侧定宽左侧自适应

1. float margin实现

  
  
  
  
  


    

      

        left
      
      

        right
      
    

1. table实现

  
  
  
  
  


    

      

        left
      
      

        right
      
    

1. flex实现

  
  
  
  
  


    

      

        left
      
      

        right
      
    

左边两列定宽，右侧自适应

1. float margin实现

  
  
  
  
  


    

      

        left
      
      

        center
      
      

        right
      
    

1. float overflow实现

  
  
  
  
  


    

      

        left
      
      

        center
      
      

        right
      
    

1. table实现

  
  
  
  
  


    

      

        left
      
      

        center
      
      

        right
      
    

1. flex实现

  
  
  
  
  


    

      

        left
      
      

        center
      
      

        right
      
    

左右定宽，中间自适应

1. float margin实现

  
  
  
  
  


    

      

        left
      
      

        center
      
      

        right
      
    

1. table实现

  
  
  
  
  


    

      

        left
      
      

        center
      
      

        right
      
    

1. flex实现

  
  
  
  
  


    

      

        left
      
      

        center
      
      

        right
      
    

一列不定宽，一列自适应

1. table实现

  
  
  
  
  


    

      

        leftffffffffffffff
      
      

        right
      
    

1. BFC盒子

  
  
  
  
  


    

      

        leftffffffffffffff
      
      

        right
      
    

1. flex实现

  
  
  
  
  


    

      

        leftffffffffffffff
      
      

        right
      
    

多列等分布局

1. float padding margin

  
  
  
  
  


    

      

        col1
      
      

        col2
      
      

        col3
      
      

        col4
      
 
    

1. table实现

  
  
  
  
  


    

      

        col1
      
      

        col2
      
      

        col3
      
      

        col4
      
 
    

1. flex实现

  
  
  
  
  


    

      

        col1
      
      

        col2
      
      

        col3
      
      

        col4
      
 
    

全屏布局

1. 绝对定位实现

  
  
  
  
  


    

      
top
      
left
      
right
      
bottom
    

1. flex实现

  
  
  
  
  


    

      
top
      

        
left
        
right
      
      
bottom
    

小结一下

跟着原作者一步一步做了这些布局，发现布局的方法就是那几种，只要真正领会他们到底是怎么回事，实现各种复杂布局并非难事。最后，在此向愿创者表示感谢，您的总结让我了解到了一些个以前不知道的东西。