今天完成的事：巩固了雪碧图制作。查看了任务一到任务5的深度思考

明天的计划：完善任务六，并提交任务六

遇到的问题：

问题：1、忽略了任务中的知识点思考。自己以前都没看过任务中、任务后的深度思考这两栏，自己只知道按自己的想法把效果图制作出了就可以了。

解决：1、今天把任务一到任务五的所有任务后的深度思考都先看了一遍，自己回答，然后在百度找答案对比，看看自己哪些知识点遗漏，哪些薄弱。

今天的收获：

一、我对盒子模型的理解：盒模型就相当于房子的框架，里面包含各种元素。content就相当于房子里面的家具，padding就相当于家具和墙壁之间的距离，border就相当于墙的厚度，margin就相当于房子离周边的花草的距离。

 知道遗漏了IE盒子模型和标准盒子模型的区别，他们两个能写出不同的布局方式。

IE盒子模型（也称怪异盒子）和标准盒子模型（W3C标准）都是由：外边距margin +    边框border +  内边距padding   +  内容content组成。但是在计算content的宽width、高height时有区别了。

IE盒子的content：

     width = content的width   + border（左右）的值  + padding（左右）的值  

     height =  content的height   + border（左右）的值  + padding（左右）的值

标准盒子的content：

     width = content的width

     eight = content的height

从上面不难看出，他们的区别是：content的宽、高，IE盒子包括了内边距padding和边框border的值，而标准盒子的不包括。

这是我之前看盒子模型，遗漏的知识点。

二、背景图片的位置属性background-position运用

大量的网站为了减少http请求数，会将大量的图片图片合成一张雪碧图（Sprite）来使用。这时候通过使用background-position属性来控制雪碧图的显示位置。这时候就体现了background-position的重要性。

使用background-position属性是设置背景图片的起始位置，既然是背景图片的起始位置，那么使用该属性的前提必须是使用background-image属性（不使用它你咋搞背景图，最多搞个背景）。有了前提，那么就可以使用了，使用过程中就会有怎么放，从哪里放的疑问。我们先来看看它的属性值以及属性值有几种取法，各种取法怎么用。

background-position的属性值有两种形式：X|Y.也就是横着（X），竖着（Y）。知道了它有两个方向，接着看它每个方向的值都有几种取法：用px像素为单位、%为单位、上中下（top|center|bottom）。现在知道了属性值，也知道值的取值方法，那可以开整了没？NO...在看看各个取值的区别，不然你要掉坑（计算方法可不一样）。

1、position在没设置任何值的时候是以X为0，Y为0，也就是默认值。

2、像素PX。例如background-position：50px 100px.表示图片以自身容器的X轴方向50像素，Y轴100像素为起点。那其它是不是也这样呢。答案：当然不是。接着看

3、%。例如:background-position：50% 50%.表示图片的起始位置可不是离自身容器的一半开始。这时我们要这么计算，在X轴方向。X的值为：（容器自身的宽度/高度 - 图片自身的宽度/高度） x 百分比 所得的数值。这时候图片以自身容器的计算出的值作为起始位置

4、如果只设置了其中一个，X或者Y，那么没设置的一个则为默认值center。

三、雪碧图的制作有一个软件叫CSS Sprites。制作特别方便，但是要注意合成为手机上图标时尺寸大小。用PS制作雪碧图时要注意图标的大小以及他们之间的间隔。如果图标太小，那么放到界面上是不好看的。看着都不协调。