今天完成的事情：

        初步完成了任务5，感觉自己的写法有点复杂了。任务5一开始是用flex布局写的，过程中审核的任务4不通过，在师兄的提示下，发现了才发现fixed定位，把这两个东西搞混了。之后就索性用flex布局完成到底了。
明天计划的事情：

        任务5已经提交审核，等待审核时看看任务6，还有看看BFC资料
遇到的问题：

        1.flex布局的困惑。

        2.任务4顶部fixed后，body无法置顶。

收获：

        1.学习了flex布局和fixed定位。flex：主轴朝向（默认为row，既横轴为主轴，纵轴为交叉轴）：flex-direction；主轴对齐：justify-content；交叉轴对齐：align-item；flex布局是否换行（默认不换行，为nowrap）：flex-wrap；由此衍生 多行对齐方式：align-content；内部子元素能通过 align-self；覆盖自身的align-item；效果和align-item一样；

flex-grow；flex-shrink；前者为扩展比例，后者为缩小比例。EX：内部两个子容器；可分别通过设置flex-grow来按比例扩展（当作拉伸，既父容器为200px的框，子容器A-50px；子容器B-100px，flex-grow都为1时。A=50+(200-50-100)/2=75 ,B=100+(200-50-100)/2=125.)---------flex-shrink为按比例缩小（父容器200px的宽，子容器A为150px，B为200px，flex-shrink都为1时.

• 容器剩余宽度: 200-（150+200）=-150
• 缩小因子的分母： 1*150+1*200 =350(1为各元素flex-shrink的值)
• A的缩小因子：1*50/350
• A的缩小宽度为缩小因子乘于容器剩余宽度：1*50/350 * -150
• A最后则缩小为：( 1*50/350 *( -150) ) + 150 =128.57px；   ）

flex-basis相当于widh 优先级最高。相当于给元素设置主轴的长度，grow和shrink 以此为基础计算；

flex-order给元素排序；

        2通过 * { margin：0；

                      padding：0；

                     }解决。