css实现手机端底部4个正方形

1、根据原理：padding、margin可以设置百分百；百分比的数值是根据父元素的宽度设置的。
例：父div   width:100px   那么子元素设置height:0 ; padding-bottom:25%  ;这样子元素的高度为  100*25% = 25px

 

2、实现：

布局:
<div class="wrap">
<div class="item1">
<div class="item2"></div>
</div>
<div class="item1">
<div class="item2"></div>
</div>
<div class="item1">
<div class="item2"></div>
</div>
<div class="item1">
<div class="item2"></div>
</div>
</div>
样式：
.wrap{
width: 100%;
background: red;
position: absolute;
bottom:0;
}
.wrap .item1{
width: 25%;
background: green;
float: left;
height: 100%;
}
.wrap .item1 .item2{
height: 0;
padding-bottom: 100%;
width: 100%;
background: #fff;
border:1px solid;
       box-sizing: border-box;
}

3、实现手机底部四个正方形
布局：

<div class="t1">

  <div class="t2">

    <div class="aaaa">

      dadsa

    </div>

  </div>

  <div class="t2">

      <div class="aaaa">

          dadsa

        </div>

  </div>

  <div class="t2"></div>

  <div class="t2"></div>

</div>

样式：
    

.t1{

      width: 400px;

      height: 200px;;

      background: red;

    }

    .t2{

      width: 25%;

      background: #ccc;

      position: relative;

      float: left;

      border: 2px solid #000;

      }

      .t2:after{

        content: "";

        display: block;

        padding-bottom: 100%;

      }

      .aaaa{

        position: absolute;

        width: 100%;

        height: 100%;

      }