今天完成的事情：

了解flex布局，背景图的缩放，移动端fixed失效的解决方案，图片和文本的垂直居中。

明天计划的事情：

开始任务六。

遇到的问题：

1.头部header里直接放图标img和文本span，设置vertical-align无效，不得不在img外层加一个div，vertical-align生效。需要垂直居中就执着于vertical-align，不习惯用margin和padding实现。用到图片直接用img，不习惯将img裹在一个div里实现。

2.头部里的返回图标img，开始用的是左浮动float，文本“个人主页”就没法在header里水平居中，而是在img右边的剩余空间里水平居中。经查float脱离文档流时，其他盒子会无视这个元素，但其他盒子里的文本会为这个元素让出位置，而absolute脱离文档流的元素，其他盒子和其他盒子里的文本都会无视它。改用absolute解决。

3.背景图用background-size：100%时，由于设置的no-repeat，背景区域高度大于背景图高度时，下方会出现空白，改为background-size：100% 100%，背景图又会拉得稍长了，然后改为background-size：cover实现，背景图扩展完全覆盖背景区域。

4.“自我介绍”右边那栏较多的文字，窗口变窄时，文字会都跳到下一行。看其他学员说可以用flex布局，于是设置弹性项目flex：1解决（flex：1 1 0%）。参考链接http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html和https://segmentfault.com/q/1010000004080910/a-1020000004121373。

5.听说移动端fixed布局容易出现问题，不太清楚就查了下，移动端软键盘唤起后，页面的fixed元素会失效，且随页面滚动而滚动，解决失效的fixed元素滚动问题思路是，将body滚动区域移到main内部，参考链接http://efe.baidu.com/blog/mobile-fixed-layout/。目前没有尝试过这个问题，是不是移动端尽量不用fixed定位呢。

收获：

学会了图片的垂直居中，应用float和absolute对其他盒子里文本的影响，背景图像的background-size属性值cover和contain，去掉列表项项目符号list-style-type：none，了解flex布局，了解移动端fixed元素失效的一般解决方案。

（os：点击提交时提示登录异常而不得不重写一遍日报时→_→[无比嫌弃的眼神]）