今天完成的事情：

1. 任务五完成

明天计划的事情：

开始任务六

遇到的问题：

1. 左边定宽，右边自适应

2. 垂直居中

3. Vh的使用遇到的问题，如下截图部分的元素很好的适应。

收获：

一、左边定宽，右边自适应，以下方法

l 左边设置左浮动，右边宽度设置100%。

l 父容器设置 display：flex；Right部分设置 flex：1 。

l 设置浮动 + 在 css 中使用 calc() 函数

l 使用负margin

二、垂直居中

使用table-cell

绝对定位和负边距

Translate

.box6 span{

            position: absolute;

            top:50%;

            left:50%;

            width:100%;

            transform:translate(-50%,-50%);

            text-align: center;

        }

display:inline-block  通过:after来占位。       

.box7{

  text-align:center;

  font-size:0;

}

.box7 span{

  vertical-align:middle;

  display:inline-block;

  font-size:16px;

}

.box7:after{

  content:'';

  width:0;

  height:100%;

  display:inline-block;

  vertical-align:middle;

}

三、vh和vw的使用

新的尺寸单位，根据屏幕宽度或高度变化而。

1vh=屏高/100，1vw=屏宽/100。

在使用的使用的时候，如果全部使用vw，感觉就是整个页面等比缩放。不能兼顾电脑端页面。

使用vh作为大部分的尺寸单位，小部分用vw和px设置。这样的方案是最好的，页面能兼顾电脑和移动端。