css常用布局

公司缺少积累
总结一下经典的布局方式供前端人员参考

居中:

• inline-block 加 text-align
  

  .parent{text-align: center;} 
  .child{display: inline-block;}

  优点:兼容性好

  缺点:需要同时设置父子 --- 不太适合封装成组件 
• margin:0 auto
  

  .child{200px;margin:0 auto;}

  优点:兼容

  缺点:  需要设定子的宽度 --- 不能做到宽度的自适应
  
  
• display:table
  

  .child{display:table;margin:0 auto;}

  缺点: 兼容IE8+

  优点: 能够自适应宽度
• flex布局
  

  /*方法一*/ 
  .parent{display:flex;justify-content:center;}
   /*方法二*/
   .parent{display:flex;} 
  .child{margin:0 auto;}

  缺点: 兼容IE9+  会影响性能

  优点:
• 定位 position ( 子绝对父相 )
  

  /*方法一*/
  .parent{position:relative;}
  .child{position:absolute;left:50%;transform:translate(-50%);}
  /*方法二 ( 需要知道子的宽度 )*/
  .parent{position:relative;}
  .child{position:absolute;left:50%;margin-left:子宽度的一半;}

  缺点: 方法一兼容IE9+   方法二需要知道子的宽度

垂直居中:

• vertical-align 加 line-height / diaplay:table-cell
  • 缺点: 需要把元素变成行内元素 或者 行内快元素
• flex布局
  

  .parent{display:flex;align-items:center;}

• 定位:
  

  /*方法一*/
  .parent{position:relative;} .child{positon:absolute;top:50%;transform:translate(0,-50%);}
  /*方法二*/
  .parent{position:relative;}
   .child{positon:absolute;top:50%;margin-top:子高度的一半;}

布局

• 一侧固定另一次自适应(以左侧固定为例)
  
  
  • float
    

    /*左侧实现*/
    .left{float:left,200px}
    /*右侧实现一*/
    .right{margin-left:200px}
    /*右侧实现二*/
    .right{border-left:200px solid #背景色}

  • fix
    

    <div class="parent">
        <div class="left">
        </div> <div class="right-fix">
            <div class="right"></div>
        </div>
    </div>
    
    .left{100px;float:left;}
    .right-fix{100%;margin-left:-100px;float:right;} 
    .right{margin-left:100px;}

  • flex

    .parent{display:flex;}
    .left{100px;}
    .right{flex:1;}

  • display:table

    .parent{display:table;table-layout:fixed;100%;}
    .left{100px;}
    .right,.left{display:table-cell;}　

• 上下等高中间自适应 
  • 和设置宽度的做法差不离

响应式布局

• viewport 加 @media

<meta name="viewport" content="width=device-width,initial-scale=1">