完成了任务5的个人主页，总结学习经验

本次任务大部分采用flex布局。

设为flex布局以后，子元素的float、clear和vertical-align属性将失效。

用position:fixed属性固定header和footer不随页面滚动

fixed定位使元素的位置与文档流无关，因此不占据空间。

fixed定位的元素和其他元素重叠。因此要把预留空间设计出来。

返回按钮是用button属性制作的。

遇到问题：其同一行的元素无法居中页面问题，发现原因是前面元素占用文档流，导致后面元素受影响。

解决方法：使用absolute+transform居中元素，优点是不会受到其他元素影响。

background:url(图片) no-repeat center center 设置背景图片不重复水平垂直居中

background-size ：cover  扩展图片来填满元素（保持像素的长宽比）

flex-direction属性决定主轴的方向（即项目的排列方向）

justify-content属性定义了项目在主轴上的对齐方式。align-items属性定义项目在交叉轴上如何对齐。

遇到问题：在flex布局里，在同一行里一个元素的换行影响了另一个元素的问题。

解决方法：把保持不变的元素给它定宽。把变化的元素给它设置 flex：1 自适应，等价flex：1 1 0；意思是宽度自动填满剩余空间。

拓展：头部的返回按键有师兄建议 border + transform ，回去研究下这个属性。

明天任务：开启任务6