今天完成的事情：今天将task5的第一部分基本写完了，下午接受来自师姐温暖的问候和考校，发现了自己很多的知识漏洞，希望这样的问候能多来几次，哈哈哈

明天的计划：开始写task5的第二个页面，应该会轻松些

遇到的问题：就是在使用绝对定位来垂直居中的时候，会发现margin-top:-50%;有时候会不起作用，这时候就发现transform:translateY（-50%）就很有用了，虽然不太懂得原理，但是以后使用的时候还是尽量使用transform属性，避免被坑

收获：1.师姐细心的讲解了关于display：inline-block；vertical-align：middle；的用法和使用场景，它是将两个或两个以上的块级元素并排，有一条轴线，然后使它垂直居中。

2.看了阮一峰的flex布局，发现display：flex；很好用

flex可以看成是一个容器，容器默认存在两根轴线，水平的主轴和垂直的交叉轴，他的几个属性都是围绕这两条轴线进行的，

《1》justify-content属性是定义在主轴的对齐方式，其中用的最多的就是我们所说的水平居中，justify-content：center；使用这个就能让容器内的元素水平居中，当然还有很多其他的flex-start左对齐，flex-end右对齐，space-between，两端对齐，元素之间的间隔相等

《2》align-items属性是定义在交叉轴的对齐方式，用的最多的是align-items：center；垂直居中，当然和justify-content一样，还有flex-start上对齐，flex-end下对齐，baseline元素里面第一行文字的基线对齐

《3》align-content是定义多根交叉轴线的对齐方式，但是如果只有一根轴线，设置这个是不起作用的，属性值也和align-items是一样的如《2》所示

《4》还有一个比较有用的flex-direction属性，定义的是主轴的方向（里面元素的排列方向）

row这个是默认值，元素从左到右排列；row-reverse从右至左排列，也就是反过来排列；column主轴在垂直方向，由上至下排列；column-reverse就是反过来，右下至上开始排列