介绍CSS布局及方式方法

1.左右布局

（1）用浮动float实现左右布局。给左盒子添加float:left；(向左浮动)，给右盒子添加float:right；(向右浮动)；但是加了浮动效果，同时就要给左右盒子的父级盒子加上class名为clearfix，clearfix::after{content:''; display:block; clear:both;}

（2）用左浮动float:left+外边距margin实现左右布局。给左边盒子设置右边距margin-right，或者给右边盒子设置左边距margin-left

（3）用绝对定位position:absolute实现左右布局。给左右盒子的父级加相对定位position:ralative，给左右盒子加绝对定位position:absolute，同时设置top，left，bottom，right样式属性

2.左中右布局

用浮动实现左中右布局。同上1（2）和1（3）的方法

3.水平居中

内联元素要居中，需要在其父级元素上加css样式text-align：center；

块级元素要居中，可在其本身上加css样式margin：0 auto；

（1）使用inline-block 和 text-align实现

（2）使用margin:0 auto来实现

（3）使用绝对定位实现

（4）使用flex布局实现

4.垂直居中

一般把高度height和行高line-height设置为相同，但是这样操作一般不是正居中；这样的话就用另外一种方式给该元素添加相同的上下内边距padding-top、padding-bottom，然后再去量该元素的整个高度并将行高line-height设置为量出来的高度的值

5.其他小技巧

（1）css中给属性加了display：inline-block；就同时要加vertical-align：top；

因为添加了display：inline-block；容易出现bug，而加vertical-align：top；可以消除这些bug，或者说可以消除hug的出现

（2）给阴影加上过渡时间就不会显得很突兀，transition：shadow 0.2s；