今天完成的事：

提交任务7

重做了任务10

任务7深度思考

1.什么是CSS sprites？ 

CSS Sprites其实就是把网页中一些背景图片整合拼合成一张图片中，再利用DIV CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片在布局盒子对象位置。

优势：

加快网页加载速度 

浏览器接受的同时请求数是10个，如果图片过多会影响整体的视觉效果，而且对于不稳定的网络带宽，加载起来更是噩梦，所以把图片拼接为一张大图，从而加快加载速度，以及加速页面渲染

后期维护简单 

该工具可以直接通过选择图片进行图片的拼接，当然你也可以自己挪动里面的图片，自己去布局你的雪碧图，直接生成代码，简单易用

缺点： 

在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好只够的空间，防止板块内不会出现不必要的背景，如果留空间或拼合位置不合适，在布局时容易出现布局这个盒子对象时，设置背景出现拼合相邻图片，干扰图片的情况;

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

浮动就是使元素脱离文本流

第一种：添加新的元素，应用clear：both

第二种：给父级元素定义overflow

第三种：:after 方法：（注意：作用于浮动元素的父亲）

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

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

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

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

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

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

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

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

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

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

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

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

解决方案

1,如果两个元素都没有定位发生位置重合现象或者两个都已定位元素且z-index相同发生位置重合现象，那么按文档流顺序，后面的覆盖前面的。

2,如果两个元素都没有设置z-index，使用默认值，一个定位一个没有定位，那么定位元素覆盖未定位元素

3,如果父元素z-index有效，那么子元素无论是否设置z-index都和父元素一致，在父元素上方

4,如果父元素z-index失效（未定位或者使用默认值），那么定位子元素的z-index设置生效

5,如果兄弟元素的z-index生效，那么其子元素覆盖关系有父元素决定

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