京东到家 首页 笔记

1. 布局

父元素采用flex  布局 子元素采用flex: 1 方式 平均分布 

 

flex: 1; 确实实现了三个不同内容的 div 平分空间

 

flex: 1; === flex: 1 1 任意数字+任意长度单位;

 

auto 为表示项目本身的大小, 如果设置为 auto, 那么这三个盒子就会按照自己内容的多少来等比例的放大和缩小,

例子：

<template>
  <div class="docker">
    <div class="docker__item docker__item--active">
      <div class="iconfont">&#xe6f3;</div>
      <div class="docker__title">首页</div>
    </div>
    <div class="docker__item">
      <div class="iconfont">&#xe7e5;</div>
      <div class="docker__title">购物车</div>
      </div>
    <div class="docker__item">
      <div class="iconfont">&#xe61e;</div>
      <div class="docker__title">订单</div>
    </div>
    <div class="docker__item">
      <div class="iconfont">&#xe660;</div>
      <div class="docker__title">我的</div>
    </div>
  </div>
</template>

<style lang="scss">
  .docker {
    position: absolute;
    padding: 0 .18rem;
    left: 0;
    bottom: 0;
    width: 100%;
    height: .49rem;
    border-top: 1px solid #F1F1F1;
    display: flex;
    box-sizing: border-box;
    &__item {
      flex: 1;
      text-align: center;
      &--active {
         color: #1FA4FC;
      }
      .iconfont {
          margin: .07rem 0 .02rem 0;
          font-size: .18rem;
      }
    }
    &__title {
      font-size: 20px;
      transform: scale(.5, .5);
      transform-origin: center top;
    }
  }
</style>

效果：

 

 

 2. 采用缩放 

 &__title {
      font-size: 20px;
      transform: scale(.5, .5);
      transform-origin: center top;
    }

当我们想设置 10px  的时候  可以采用   transform: scale(.5, .5); 的形式