今天完成的事情： 

修改优化任务五部分问题，完善任务5的总结，梳理相应的知识点。

明天计划的事情：

上手任务6。
遇到的问题：

在图片背景引用中，发现图片是拉伸而不是跟原稿正常显示，

后来师兄跟我说查下background-size的那几个属性。

经查background-size有常用的几种属性。

本次背景图要正确引用到的是background-size：cover。使图片保持纵横比，并且在定位好了的区域进行有比例的缩放，使其能够正常按比例的显示需要覆盖的区域。

而background-size：contain则是另外一种效果：它只显示盒子里面的大小，超出部分是不显示的。

收获了什么：

1尽可能不使用bcakground(url)吧，还不如image来的舒服，背景图的代码量略多，并且不好控制图片大小和布局，容易迷惑。

2,今天拜读了下wiki里面之前web师兄的很多入职分享感悟和各种分享文章，收获颇多，看到他们的任务进度速度和学习的精神使我无地自容，非常惭愧，决定一改之前的态度，改变之前的学习方法，学习集中精力，不摸鱼。遇到问题及时解决，不能再耽搁，做个任务花了那么长的时间，而且还总是出各种幺蛾子不该出现的问题，学了这么久才这点进度，非常惭愧！

任务5总结：

任务名称：CSS任务5

成果链接：https://wangyhweb.github.io/Task/task5/task5.html

任务耗时：6天

官方脑图：

个人脑图：

任务总结：

任务进度较慢，开始掌握我的知识点不足，背景图那些用了一天的方法去做，很多地方都被拖延了时间，自己速度慢了一点。不过还好做下来收获也挺多的，更熟悉弹性盒子和定位的搭配使用了。

任务5使用较多的是定位家族的绝对定位和相对定位，这倆个定位要配合宽高和外边距使用，及头部和底部的固定定位，固定定位要配合上个相邻的盒子外边距的和层级关系z-index搭配使用，不然会出现一些挡住主体内容或者其他奇奇怪怪的问题。

该任务中处理背景图片和头像也是很重要的方面，需要先引入图片，再添加样式和相对定位使其脱离常规流使其宽高显示符合原稿要求，并且使用cover属性使其覆盖整个容器。另外同时要设置margin-top到顶部的距离，以免把头部内容给遮挡下去。

该任务中使用较多的也还有弹性盒子 

justify-content: flex-start;align-items: center;这垂直居中和水平居中常常出现，当然http://www.imooc.com/article/28580可以看此文，css居中的15种方式，

在底部盒子设计上，注意a标签的触发区域，在button标签下面添加a标签超链接触发a标签的范围只有字体那一块区域并且不能设置宽高，需要添加display: inline-block;转换为块元素，然后设置宽高100%；

另外要f12检查button的自带样式，要全面积任意触发还需要取消padding才行。另外对于按钮的宽度需要配合calc使用，总之遇到不同分辨率下该盒子样式不同变化大小，肯定要calc使用，万物都是盒子，万物都是盒子，万物都是盒子，万物都是盒子，万物都是盒子，盘它盘它盘它。