所有的布局功能总结

1、图片等比例自动缩放

img{
  width:auto;
  heigh:auto;
  max-width:100%;
  height-width:100%；
}
1.1图片设置background-size/position/origin/clip/repeat
[http://www.cnblogs.com/pandawind/p/9771579.html](http://www.cnblogs.com/pandawind/p/9771579.html)
cover:是按照最长边比例放大或缩小
contain:是按照最短边比例放大或缩小

2、子元素宽高确定或者不确定，水平垂直居中

#parent{
            background: pink;height: 300px;position:relative;
        }
        #son{
            background: red;
            width:20px;
            height:30px;
            position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin:auto;
        }
        #parent{
            background: pink;
            width:1000px;
            height:300px;
            display:table;overflow:hidden;

        }
        #son{
            background: red;
            vertical-align:middle;display:table-cell;   只能做到垂直居中，做不到水平居中
        }
        #parent{
            background: pink;
            height:100px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        #son{
            background: red;
        }

3、移动端页面适配———多方案解析
https://www.jianshu.com/p/3b45aa981e77