对页面中常见布局的一些总结

认为手机很适合用百分比来控制布局，比如像下面布局的所示

      *{
          padding:0;
          margin:0;
      }
      .wrapper{
          width:100%;
          height:0;
          padding-bottom: 30%;
          background: #f00
      }

宽和高就会成固定比例，height设置为0，就不会再撑大了
首先是对与一个页面中一块区域图标的排列，就如下图类似的

这是手机页面上常见的图标列表，用的是百分比的形式的布局，每个图标所占宽1/4,具体代码如下

    <div id="app">
        <div class="icons">
            <div class="icon">
                <div class="icon-img">
                    <img src="https://img1.qunarzz.com/piao/fusion/1611/d0/e09575e66f4aa402.png" alt="">
                </div>
                <p>动植园</p>
            </div>
        </div>
    </div>

        * {
           margin: 0;
            padding: 0;
        }
        .icons{
            width: 100%;
            height: 0;
            padding-bottom: 50%;
            background: green；
            overflow: hidden;
        }
        .icon{
            width: 25%;
            height: 0;
            padding-bottom: 25%;
            background: red;
            position: relative;
            float: left;
        }
        .icon p{
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            text-align: center;
            line-height: 22px;
        }
        .icon-img{
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 22px;
        }
        .icon-img img{
            height: 100%;
            box-sizing: border-box;
            padding: 5px;
            display: block;
            margin: 0 auto;
        }

它在加载图片的时候，图片下面的描述不会有跳动。 img外面包了个div，给了它绝对定位，用bottom空出放文字。img用height：100%来控制
对页面布局中的垂直居中操作，让效果如下!

  <div class="wrapper">
      <span>123</span>
  </div>

        *{
            padding:0;
            margin:0;
        }
        .wrapper{
            width:300px;
            height:300px;
            background: red;
            display: flex;
            flex-direction: column;
            justify-content:center;
            text-align: center;
        }

垂直居中的核心代码为

display: flex;
flex-direction: column;
justify-content:center;

还有种方法是定位，再通过margin值来控制

  <div class="wrapper">
      <div>123</div>
  </div>

        *{
            padding:0;
            margin:0;
        }
        .wrapper{
            width:300px;
            height:300px;
            background: red;
            text-align: center;
            position: relative;
        }
        .wrapper div{
            width:100px;
            height:100px;
            line-height: 100px;
            position: absolute;
            top:50%;
            left:50%;
            margin-top: -50px;
            margin-left: -50px;
        }

---

(未完。。。)