今天完成的事情：完成了任务三。
明天计划的事情：巩固完善任务三，预习任务四。适配night让手机可以访问到我的页面。
遇到的问题：自适应布局还不太明白。
收获：浮动（float）的使用，

了解了弹性盒子基础的一部分：

1，弹性盒（ Flexible Box 或 flexbox），

是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

2，弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。

弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。（从左到右）排列。

当然我们可以修改排列方式。
如果我们设置 direction 属性为 rtl (right-to-left),弹性子元素的排列方式也会改变，页面布局也跟着改变:（从右到左）排列。

3，弹性盒子常用属性：

（display ）            指定 HTML 元素盒子类型。
（flex-direction ）   指定了弹性容器中子元素的排列方式。
（justify-content ） 设置弹性盒子元素在主轴（横轴）方向上的对齐方式。
（align-items ）      设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
（flex-wrap ）         设置弹性盒子的子元素超出父容器时是否换行。
（align-content ）   修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐
flex-flow flex-direction 和 flex-wrap 的简写。
（order ）               设置弹性盒子的子元素排列顺序。
（align-self ）         在弹性子元素上使用。覆盖容器的 align-items 属性。
（flex）                   设置弹性盒子的子元素如何分配空间。