CSS布局

左右布局

1. 浮动法

<style>
  .clearfix::after{
    content: "";
    display: block;
    clear: both;
  }
</style>
<div class="clearfix">
    <div style="float: left;"></div>
    <div style="float: left;"></div>
</div>  

2. 绝对定位法

<style>
    .wrapper{
       position: relative;
    }
   .left,
   .right{
      position: absolute;
      top:0;
      width: 50%;
      left: 0;
   }
   .right{
      right: 0;
   }
</style>
<div class="wrapper">
    <div class="left"></div>
    <div class="right"></div>
</div> 

左中右布局

左中右布局也可以使用浮动法和绝对定位法。

水平居中

1. 内联元素
   在父级加上text-align:center使得后代内联元素水平居中

2. 块级元素
   给定宽度，然后margin: 0 auto;

垂直居中

1. 使用padding调整。
2. line-height与height同高
3. vertical-align: middle;
4. position: absolute;top: 0;bottom: 0;margin: auto;

其他小技巧

1. 巧用继承减少重复量

2. 巧用max-width实现自适应

3. 巧用Chrome控制台查看计算属性，查看状态。

4. 巧用Google: css linear gradient generator，css box-shadow generator 用工具来画渐变、阴影。