2020年2月10日星期一 - 工作

1. 学习colorui的布局方式（源码）

元素的垂直居中，能自适应不同手机端
先看效果图：

wxml

<view class="justify_align_center">
   <view class="justify_align_center_box">
      <image src="/images/test/timelist_2.png" class="timelist_title_image"></image>
      <text class="timelist_title">时令好品</text>
    </view>
  </view>

wxss

.justify_align_center {
  display: flex;
  /* 元素水平居中有效, 宽度问题日后可议 */
  /* 宽度设置为手机屏幕的响应式宽度 */
  justify-content: center;
  width: 750rpx;
  /* 元素垂直居中，需要设置高度大于子元素 ，高度小于该元素高度垂直居中无效 */
  /* 设置最高度为100rpx,怎样找到合适app的尺寸 */
  /* 当窗口尺寸对于该元素显示小于100rpx时，该元素不在变小 */
  align-items: center;
  height: 136rpx;
  min-height: 100rpx;
  /* 方便设置子元素定位 */
  position: relative;
}
/* 子元素用box包裹 */
/* action */
.justify_align_center_box {
  /* 为了让子元素盒子与父级盒子之间留出合适的空隙 */
  display: flex;
  /* 子元素盒子的子元素水平居中 */
  /* 宽度问题日后可议 */
  justify-content: center;
  max-width: 100%;
  /* 子元素盒子的子元素垂直居中 */
  align-items: center;
  height: 100%; /* cu-bar action height: 100%；却不能达到cu-bar的100% */
}
/* 居中子元素1，图片 */
.timelist_title_image {
  width: 48rpx;
  height: 40rpx;
  margin-right: 24rpx;
}
/* 居中子元素2，文字 */
.timelist_title {
  font-size: 42rpx;
  font-family: Arial;
  font-weight: normal;
  color: #3f3736;
}

2. 项目经理和组长

初入公司，速度适应，有选择的多吃苦。

3. 每日技能

实现元素垂直居中，结合面试题的话，那些不给高度的问题要怎么解决，可以考虑加入今天的第一条。