左右布局

<div class="father clearfix">
  <div class="left"></div>
  <div class="right"></div>
</div>

子元素上加float:left;，同时在父元素加上清除浮动,代码如下:

.left{
    float: left;
}
.right{
    float: right;
}
.clearfix{
    content: '';
    display: block;
    clear: both;
}

左中右布局

父元素下由3个子元素，把3个子元素都浮动起来，中间元素用margin调整左右间距即可

水平居中

1. 如果是一个有宽度块级元素，如div，则用margin: 0 auto;即可水平居中
2. 如果是一个内联元素如<a>，让它里面的文字水平居中，用`text-align: center;
3. 如果有多个元素，也可以用float+clearfix，再用margin来调整左右间距

垂直居中

1. 让文字垂直居中padding+line-weight，这样的好处是不用固定宽高。用内
   容来撑起高度
2. 块级元素用相对定位

.parent{
    height: 200px;
    position: relative;
}
.a{
    heihght: 1000px;
    margin-top: -50px;    
    position: absolute;
    top: 50%;
}

水平垂直居中

1. 爸爸relative，儿子absolute，儿子的上下左右都为0，再加个margin:auto

  top:0;
  bottom:0;
  left:0;
  right:0;
  margin:auto;

2.用flex简单粗暴

display: flex;
justify-content: center;
align-items:center;

其他小技巧

1. 制作导航栏用positon: fixed，相对屏幕定位
2. 宽度最好用max-width
3. 制作两列多行内容时，可以用width: 50%，来实现换行
4. 给一个有内容的div加padding时通常会变胖，可以加多一层div，在新加的div上使用padding，那么原来的div不会增加宽度
5. 使用display: inline-block会发现下面会有空隙，那么加一句vertical-align: top