今天完成的事情：

任务6基本完成，还需要一些小细节方面，以及师兄测试一下，任务6让我认识到了之前学习的不足，基础知识点好多不知道，因为之前没用过，也没有看过，做任务的时候就很麻烦，感慨基础不好，要补基础了，

.div{background:url(images/2.jpg);今天多次用到了盒子里面加背景图片，背景图片加上会遇到一个重复的问题，

background-repeat:no-repeat;

加上这个代码就会实现只有一个，不会重复。

今天还学到了position的几个用法

1、static（静态定位）：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。z-index是可以完全覆盖下面的元素，不让它显示出来，屏幕滚动时加上这个

position: fixed;
bottom: 0;

如果是上面就用top0   下面就用bottom0   实现上面导航栏固定并且，元素翻动使上面覆盖。

2、relative（相对定位）：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级。　如果这个元素作用到父元素上，子元素在使用绝对定位，就可以相对于父元素绝对的定位，如果不给父元素加上的话，加上的话就是相对于整个html绝对定位。下面是我的代码

　父元素

width: 50px;
color: #68cdd5;
text-align: center;
margin-top: 20px;

子元素加上绝对定位就可以实现

3、absolute（绝对定位）：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。绝对定位可以实现在任何地方定位，并且flex影响不了绝对定位。

4、fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。这个定位之后就不好改变位置，就是你定到你页面的什么位置，它就不会变，无论你怎么翻动改变页面。

雪碧图

雪碧图被运用在众多使用了很多小图标的网站上。相对于把每张小图标以.png格式文件的形式引用到页面上，使用雪碧图只需要引用一张图片，对内存和带宽更好。

   使用雪碧图的优点有以下几点：

1. 将多张图片合并到一张图片中，可以减小图片的总大小。

2. 将多张图片合并成一张图片后，下载全部所需的资源，只需一次请求。可以减小建立连接的消耗。

提一下雪碧图非常方便，减少了bug。

以及下载了雪碧图合成工具，做了雪碧图。

明天计划的事情：

提交任务6，开始任务5

遇到的问题：（遇到什么困难，怎么解决的） 

电脑出现bug,一开始导航栏做好之后，覆盖了下面的元素，不能显示出来

雪碧图的问题，一开始我一直想不通，雪碧图是什么原理，我以为好几个图片合成，然后导入到页面上，就可以使什么的几个图片改变位置，但是并不是这样，后来是师兄给我说了一下，才避免我继续钻牛角尖。

相对于父元素绝对定位，一开始我并不了解，因为之前任务没用过，然后就百度了一下，意思应该是这样的，就是给父元素一个相对于html就是整个页面，一个相对定位这个元素，然后再给子元素一个绝对定位，这个绝对定位，就不是相对于整个页面了，就是相对于它的父元素，这样就解决了无法复制的，原因。

收获：

学习了position的几个用法，雪碧图的使用，如何用雪碧图，学会了相对于父元素绝对定位。

再一次用到了flex。