一，今天完成的事情

1.       早上过来复习了一下昨天学的绝对定位和相对定位，把之前自己写的日报都过了一遍，相当于复习了下之前的知识点。

2.       学习了flex（弹性布局）的相关知识，弹性布局简单方便，可操作性强。任一元素都可指定为弹性布局，指定为弹性布局之后，它的子元素的float，clear和vertical-align将失效。Flex容器（flex-dieiction（从哪头开始），flex-wrap（换行），align-items（定义交叉轴如何对齐）align-content（定义轴线如何对齐）flex-content（定义项目在主轴上的对齐方式）），flex项目（order（排列顺序），flex-grow（放大比例，默认为0），flex-shrink（项目的缩小比例，默认为1，空间不够自动按比例缩小）align-self（项目自身的对齐方式））。

3.  为了更好的了解flex布局，用学的知识做了网上教程上面的习题。效果如下，http://zengyupei.cn/task5_test.html

4.       下午开始做任务5，使用fixed布局了header（使用flex）和footer（使用box-sizing），然后使用absolute完成了上半部分的图片布局。下半部分思考了一会，最后用上述习题所用的类似的弹性布局（div+span）完成了大部分，http://zengyupei.cn/task5.html 中途遇到了2个问题。

二，打算明天完成的事情

1.       继续完成task5，代码写的很乱，明天学习下代码规范，规范下自己的代码格式。

2.       完成task5的深度思考，深度思考的东西开始做笔记。

3.       下午找题目写ppt，准备后天的小课堂。计划写弹性布局，明天再看看。

三，遇到的问题

1.       使用弹性布局，布局task5的下半部分的时候，遇到了“自我介绍”会自动转行的问题，想了半天，后来问了师姐才知道用flex-shrink：0（不缩小），搞定了。

2.       Div框设置width：100%，margin-left：5vw的时候，框跑到外面去了。出现了横向滚动轴，后来通过设置width：95%，margin-left：5vw搞定了，感觉很奇怪。

四，收获

1.       学会用弹性布局布局较复杂的页面。

2.       将一个任务拆分成各个小任务依次完成。

3.       学会了用object-fit，处理图片，解决图片自适应问题。