今天完成的事情：（完成了一部分任务五） 
明天计划的事情：（完成任务5的剩下一部分，继续学习flex布局以及绝对定位相对定位的知识。关于html及css代码规范再详细学习一下，复习之前的知识，包括浮动，盒子模型，定位等，现在对浮动和盒子模型的理解还是很模糊，准备多加理解下列内容

flex布局容器属性

* flex-direction：决定主轴的方向

row 从下到上；row-reverse 从上到下；column 从左到右；column-reverse 从右到左；

* flex-wrap：如果一行排列不下如何换行

nowrap 不换行；wrap 换行；wrap-reverse 换行，第一行在下面；

* flex-flow：flex-direction属性和flex-wrap属性的简写形式

row warp；

* justify-content：项目在主轴上的对齐方式

flex-start 左对齐；flex-end 右对齐；center 居中；space-between 两端对齐；space-around 

* align-items：项目在交叉轴上如何对齐

flex-start 交叉轴的起点对齐；flex-end 交叉轴的终点对齐；center 交叉轴的中点对齐；baseline 项目的第一行文字的基线对齐； stretch 如果项目未设置高度或设为auto，将占满整个容器的高度；

* align-content：属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

flex-start 与交叉轴的起点对齐；flex-end 与交叉轴的终点对齐；center 与交叉轴的中点对齐；space-between 与交叉轴两端对齐，轴线之间的间隔平均分布；space-around 每根轴线两侧的间隔都相等；所以，轴线之间的间隔比轴线与边框的间隔大一倍；

stretch（默认值） 轴线占满整个交叉轴；

Flex项目属性

* order属性（num）

order定义自身排列顺序。数值越小，越靠前，默认为0。-1/0/1/2/3/...

* flex-grow属性（num）

flex-grow 定义自身放大比例，默认为0不放大。例如：1/2/1=25%:50%:25%

* flex-shrink属性（num）

flex-shrink定义了空间不足时自身缩小比例，默认为1自动缩小，0不缩小。

* flex-basis属性

flex-basis定义最小空间，默认值为auto，即自身的本来大小。

* flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

* align-self属性

align-self定义自身对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

清除浮动

什么是清除浮动，因为在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。

清除浮动方法

方法一：使用带clear属性的空元素

在浮动元素后使用一个空元素如<div></div>，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用<br />或<hr />来进行清理。

优点：简单，代码少，浏览器兼容性好。

缺点：需要添加大量无语义的html元素，代码不够优雅，后期不容易维护。

方法二：使用CSS的overflow属性

给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动，另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。

在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。

方法三：给浮动的元素的容器添加浮动

给浮动元素的容器也添加上浮动属性即可清除内部浮动，但是这样会使其整体浮动，影响布局，不推荐使用。

方法四：使用邻接元素处理

什么都不做，给浮动元素后面的元素添加clear属性。

方法五：使用CSS的:after伪元素

结合 :after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和 IEhack ，可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。

给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。

遇到的问题：（1在设置主页背景图片的时候，把图片的宽度调到一程宽度时图片会不在增大，而是分成两个图片，我根据图中代码成功解决了图片的自动复制问题。2在任务5表头做完之后我运用了绝对定位对表头进行了位置固定，结果发现定位使两个div发生了重合，表头挡住了图片，导致图片显示不出来，我初步断定应该可以用flex布局的方法解决这个问题，还没有进行测试。通过今天的任务，我意识到自己对于flex布局和定位这方面掌握的还是不熟练，准备接下来多加练习，争取早日掌握。

） 
收获：（综上所述）