课程名称：前端工程师
课程章节： 第2章 项目首页开发
主讲老师：Dell

课程内容：

第2章 仿"京东到家"首页开发

2-3 利用CSS技巧实现搜索及 banner 区域布局

• 1）撑开图片防抖动: hack css技巧，避免banner图片的抖动
  先撑开图片区域，防止加载抖动。

  .banner {
    // hack css技巧，避免banner图片的抖动
    // 先撑开图片区域，防止加载抖动。
    height: 0;
    overflow: hidden;
    // 这里是图片的宽高比。。1528/388=25.4%
    padding-bottom: 25.4%;
    &__img {
      width: 100%;
    }
  }

2-4使用 flex布局实现图标列表布局

• 图标的 flex 布局: display: flex
• flex换行： flex-wrap : wrap

 // icon图标模块
.icons {
  display: flex;
  // 换行
  flex-wrap: wrap;
  margin-top: .16rem;
  &__item {
    width: 20%;
    &__img {
      display: block;
      width: .4rem;
      height: .4rem;
      margin: 0 auto;
    }
    &__desc {
      margin-bottom: .16rem;
      line-height: .17rem;
      font-size: .12rem;
      color: $content-fontColor;
      text-align: center;
    }
  }
}

margin的用法：

• 1、控制的是盒子与盒子之间的位置关系
• 2、margin长在盒子外围的，不会对盒子本身的大小造成影响。
• 3、margin设置方法：
  margin:10px 四周
  margin:10px 20px 上下 左右
  margin:10px 20px 30px 上 左右 下
  margin:10px 20px 30px 40px 上右下左
  5:margin支持负值！！
• 4、让子元素在父元素里面左右居中：margin:0 auto;

2-5首页布局收尾

overflow-y: auto;
溢出（容器）如果内容超出容器却又不想其隐藏时可以将其属性值设置为auto

.wrapper {
  // Overflow   溢出（容器）如果内容超出容器却又不想其隐藏时可以将其属性值设置为auto
  overflow-y: auto;
  position: absolute;
  left: 0;
  top: 0;
  bottom: .5rem;
  right:0;
  padding: 0 .18rem .1rem .18rem;
}

学习收获：

学会了使用 flex进行页面布局，继续加油！！