html，css简单的自适应正方形九宫格

SuperYiY

已于 2023-02-09 11:58:22 修改

阅读量241

点赞数 1

文章标签： css html 前端

于 2023-02-09 11:50:45 首次发布

本文链接：https://blog.csdn.net/weixin_44786330/article/details/128949384

版权

效果 😉：

在这里插入图片描述

废话不多，直接上

html

  <div id="QR-code">
    <div class="box-wrap">
      <div class="box">
        <div class="box-padding">
          <div class="box-img">
            <img src="../../assets/images/4@2x.png" alt="">
          </div>
          <div class="box-title">标题名称</div>
          <div class="box-tips">可快捷查看xxx情況</div>
        </div>
      </div>
      <div class="box">
        <div class="box-padding">
          <div class="box-img">
            <img src="../../assets/images/4@2x.png" alt="">
          </div>`在这里插入代码片`
          <div class="box-title">标题名称</div>
          <div class="box-tips">可快捷查看xxx情況</div>
        </div>
      </div>
      <div class="box">
        <div class="box-padding">
          <div class="box-img">
            <img src="../../assets/images/4@2x.png" alt="">
          </div>
          <div class="box-title">标题名称</div>
          <div class="box-tips">可快捷查看xxx情況</div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="footer-img"><img class="image" src="../../assets/images/4@2x.png" alt=""></img></div>
      <div class="footer-text">xxx社区</div>
    </div>
  </div>

css （浮动实现）

#QR-code{
  height: 100vh;
  padding: 20px;
  background-color: #F8F8F8;
}
.box-wrap {
  overflow: hidden;
  .box {
    float: left;
    margin: 5px;
    width: calc(100% / 3 - 10px);
    background-color: #FFFFFF;
    box-shadow: 0 2px 4px 0 #eeeeee;
    text-align: center;
    .box-padding{
      padding: calc((100% - (6 + 2 + 2)rem) / 2) 0;
      .box-img{
        height: 6rem;
      }
      .box-title{
        height: 2rem;
        font-weight: 600;
        color:#333333;
      }
      .box-tips{
        height: 2rem;
        font-size: 12px;
        color: #999999;
      }
    }
  }
}
.footer{
  width: 100%;
  height: 50px;
  text-align: center;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  .footer-img{
    height: 20px;
    margin-bottom: 5px;
    .image{
      height:20px;
      overflow: hidden;
    }
  }
  .footer-text{
    -webkit-transform: scale(0.5);
    font-size: 20px;
    color: #B9B9B9;
  }
}

知识点：

高度height的百分比相对于父元素的高度，父元素默认是没有高度的。如果不给父元素一个高度，子元素也不会有高度。在普通文档流中，块级元素的宽度默认是浏览器的宽度，因此百分比有效。也就是为什么子元素有宽度而没有高度。padding-bottom和padding-top的百分比是相对于父元素的宽度，而不是高度。因此设置了padding-top或者padding-bottom百分比的子元素，其高度就不再依赖于父元素高度了。由于padding-bottom和padding-top的百分比是相对于父元素的宽度，当屏幕大小出现变化时，元素基于padding-top或者padding-bottom的高度也会随着宽度的变化而等比例的缩放。