今天完成的事情：

今天做完了杀人游戏依次点击的顺序
明天计划的事情： 

明天开始做已经死掉的人渲染为死亡颜色
收获：

1.什么是CSS sprites？

将原本需要多张图像文件分别显示，整并为单一图像文件的分区显示技术

（1）使用雪碧图的优点：

      1）利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；

      2）CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。

      3）解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。

      （2）使用雪碧图的缺点

      1）在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景；这些还好，最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂。

      2） 至于可维护性，这是一般双刃剑。可能有人喜欢，有人不喜欢，因为每次的图片改动都得往这个图片删除或添加内容，显得稍微繁琐。而且算图片的位置（尤其是这种上千px的图）也是一件颇为不爽的事情。

      3）由于图片的位置需要固定为某个绝对数值，这就失去了诸如center之类的灵活性。

2.什么是浮动？有哪些清除浮动的方法？

浮动（Float）最初的定义我想只是为了实现图文环绕效果，而如今通常在多栏布局时使用，是CSS里最最常用的一种布局手段。

清理浮动的方法

使用带有clear属性的空元素

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

使用CSS的:after伪元素

添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。目前比较完美的解决方式。

使用CSS的overflow属性进行怪异处理

给浮动元素的容器添加overflow:hidden;或overflow:auto;可以怪异清理浮动。

给浮动元素的容器添加浮动

给浮动元素的容器也添加上浮动属性即可清理内部浮动。

使用邻接元素清理

给浮动元素后面的元素添加clear属性。

3.rgba和opacity的透明效果有什么不同？display和visiblity有什么区别？

1.RGBA与OPACITY的区别

opacity会继承父元素的opacity 属性，而RGBA设置的元素的后代元素不会继承不透明属性。简单来说就是opacity作用于元素和元素所有内容的透明

rgba相对于opacity还是技高一筹的，当然只要是涉及颜色的，都可以用rgba来设置。

DISPLAY 和VISIBILITY有什么区别?

1.主要在于visibility:hidden占据空间，无法点击，另一个display:none;不占据空间，无法点击。有一句话是这么说的，display：none会真的把你弄没，而visibility：hidden则仅仅是为你披上一件隐身衣而已，你还在原来的地方呆着。设置透明值(opcity)，占据空间，可以点击。 该方法并非真正意义上的隐藏，只是将元素设为透明，但是只适用于文字类的元素，不适用于input，因为即使看不到，可以点击相应input。

2.就是displayde回流与渲染visibility没有这个影响前端性能的问题。回流则是重新使该页面渲染一次，从而影响性能。

3.株连性,所谓“株连性”，就是如果祖先元素遭遇某祸害，则其子子孙孙无一例外也要遭殃。display:none就是“株连性”明显的声明：一旦父节点元素应用了display:none，父节点及其子孙节点元素全部不可见，而且无论其子孙元素如何不屈地挣扎都无济于事.我们给一个父元素应用visibility:hidden，则其子孙后代也都会全部不可见。如果子孙元素应用了visibility:visible，那么这个子孙元素又会神奇般地显现出来。

4.描述下z-index和叠加上下文是如何形成的？

层叠上下文，就是在呈现的时候决定哪个元素在上、哪个元素在下

同一层叠上下文中，层叠级别大的显示在上，层叠级别小的显示在下，相同层叠级别时，遵循后来居上的原则，即其在HTML文档中的顺序。不同层叠上下文中，元素呈现顺序以父级层叠上下文的层叠级别来决定呈现的先后顺序，与自身的层叠级别无关。

z-index语法：

z-index: auto(自动，默认值) | integer(整数) |  inherit (继承)

z-index 接受的属性值为：关键字auto和整数，整数可以是负值。

需要注意的是 z-index 虽然很给力，却只能应用于定位元素（即设置了 position 属性为非 static 值），其它情况下，z-index 将被忽略。

什么是层叠上下文（STACKING CONTENT）

在一个层叠上下文，所有的元素根据规则从下到上排列，分成了七个等级：

1、背景和边框 — 形成层叠上下文的元素的背景和边框。 层叠上下文中的最低等级。

2、负z-index值 — 层叠上下文内有着负z-index值的子元素。

3、块级盒 — 文档流中非行内非定位子元素。

4、浮动盒 — 非定位浮动元素。

5、行内盒 — 文档流中行内级别非定位子元素。

6、z-index: 0 — 定位元素。这些元素形成了新的层叠上下文。

7、正z-index值 — 定位元素。层叠上下文中的最高等级

5.如果是在手机上查看投票页，没有hover效果时应该怎么办？

手机端没有hover特效，当你点击的时候就直接触发click

手机端有他特殊touch事件。touchstart，touchmove, touchend.

脑图：

任务总结：任务七学会了使用雪碧图，利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；任务七完成之后对于DIV的嵌套关系更加清楚了；还学会了清除浮动的方法，比如说使用带有clear属性的空元素，CSS的:after伪元素，给浮动元素后面的元素添加clear属性。