今天完成的事：

1.学习了flex布局的基本知识，然后在自己手动把flex布局的一些属性用代码敲了一遍。自己写了个demo尝试运用。

2.开始任务的页面布局，已完成了一半。

3.在布局的时候遇到了一个坑，背景图片在不同分辨率下，显示不全，以为是ps切图的问题，反复切了好几次图插入到代码中以后显示效果还是不全，后来

请教了师姐以后发现是background-size的问题。以前接触到但是没有深入学习，借着这个问题的出现，又重新加强了了解background的一些用法.:

background：规定在一个声明中设置所有背景属性

background性在CSS中的排列顺序写法：

     background-color 背景颜色
     background-image 背景图片

     background-repeat 背景重复

     background-attachment 背景图片是固定还是滚动

     background-position 背景图片的定位

代码实例background: #00FF00 url(bgimage.gif) no-repeat fixed top;

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

background-size:规定背景图片的尺寸。

在未设置的情况先 ，默认属性值auto。 可以以像素（px）或者百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度.

语法：background-size: length|percentage|cover|contain;

length：   设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

percentage：以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值                      会被设置为 "auto"。

cover：        把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。

contain：      把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

----------------------------------------------------------------------------------------------------------------------------------

4.学习vertical-align与line-height 

line-height ：行高是指文本行基线baseline之间的垂直距离。

可以被赋值：

设置固定长度(px,rem等固定单位)设置数字:

设置数字，此数字会与当前的字体尺寸相乘来设置行间距。

设置百分比:基于当前字体尺寸的百分比行距

注意：数字可以直接被继承，然后在计算行高，而百分比是先计算出行高，在以px继承

vertical-align： 使行内元素的基线相对于该元素所在行的基线的垂直对齐

  默认值baseline:元素基线与父元素基线对齐众所周知，

vertical-align支持很多属性值；(关键字值:vertical-align等等: middle;长度值：vertical-align: 4px等等；百分比值：vertical-align: 10%...等等)

注意：vertical-align的百分比值不是相对于字体大小或者其他什么属性计算的，而是相对于line-height计算。

-------------------------------------------------------------------------------------------------------------------------------------------------

明天计划的事：1.将任务五的页面布局完成，并加以修改，在不同分辨率设备下调试。

                          2.任务三给打回来了，明天将任务三加以修改，提交任务三。

遇到的问题：在布局的时候遇到了一个坑，背景图片在不同分辨率下，显示不全。一通操作后还是没解决，请教了师姐后，得到了解决。是因为background-size使用的是cover属性，它的作用是把背景图片放大到适合元素容器的尺寸，图片比例不变，但是超出容器的部分可能会裁掉。将cover改成background-size：100% 100%解决了背景图片显示不全的问题

收获：页面布局已完成一半。学习了background的使用，加深了记忆。