驴友网图标区域页面制作——如何进行上图标下文字的块布局

本章节对应7-4的课程
1.首先在git线上新创建一个分支 index-icons
2.将线上分支拿到本地，然后在git bash切换到该分支上进行开发

git pull
git checkout index-icons

注意：进行下面这种设置的时候，一定记得让heght：0，不然在变化时，高度不会是页面宽度的25%，

  .icon
    float left
    background red
    width 25%
    height 0
    padding-bottom 25%

注意：在div+css中，如何使得自己的图片能够自适应div的大小，只要使得img的width和height为100%，即可，如果要求一个最大的宽高度，则需要在这个img上style=“max-height:图片高度; max-width:图片宽度”

如何进行上图标下文字的布局

1.自己的处理方法

//html
        <div class="icon">
            <img class="icon-img" src="@/assets/images/icon-img/jingdian.png" alt="">
            <p>景点门票</p>
        </div>

//.css
  .icon
    float left //这个属性是自身项目需要，可按照自己的实际进行增加和删除
    background red
    width 25%
    height 0
    padding-bottom 25%
    .icon-img
      width 60%
      padding-top 5%
      padding-bottom 5%

2.教程中的方法
在本例中，需要图片和文字一起自适应外边框的大小。

//html
        <div class="icon">
            <div class="icon-img">
                <img class="icon-img-content" src="@/assets/images/icon-img/jingdian.png" alt="">
            </div>
            <p>景点门票</p>
        </div>

 //.css
  .icon
    position relative
    float left
    background red
    width 25%
    height 0
    padding-bottom 25%
    .icon-img
      position absolute
      top 0
      left 0
      right 0
      bottom .44rem
      background blue
      .icon-img-content
        height 100%