今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin） 

完成了任务七，已经提交了。完成任务七的过程中解决了以及遇到了一些问题。

任务七深度思考：

1.什么是CSS spirites

雪碧图：多个图片集成在一个图片中的图

雪碧图是根据CSS sprite音译过来的，就是将很多很多的小图标放在一张图片上，就称之为雪碧图。

background-position属性使用频率非常高，大量的网站为了减少http请求数，会将大量的图片图片合成一张雪碧图（Sprite）来使用。

雪碧图的使用就是通过控制background-position属性值来确定图片呈现的位置，不得不说它的作用非常重要，当然除了在使用雪碧图的场景外，别的某些场景也常常会使用到这个属性，用法是使用background-position 。

background-position 属性设置背景图像的起始位置。

2）什么是浮动

浮动：

浮动元素会从正常文档流中删除，但是还是会影响布局，一个元素浮动时，其他元素会“环绕”该元素

浮动的性质：

1.浮动元素周围的外边距不会合并

2.如果要浮动一个非替换元素。

则必须为元素声明一个width

float：none（不浮动）

浮动元素会生成一个块级框，而不论这个元素是什么

负外边距可能导致浮动元素移到其父元素外面。

行内元素完全覆盖浮动图像（包括北京，边框，内容和一切）。

块级元素只是将内容显示在浮动元素之上，但其背景和边框在浮动元素之下。

清除浮动

clear：值 left，right，both，none，inherit

应用于：块级元素

clear：left 是不希望该元素左边有浮动

清除浮动的原理就是：在元素上外边距之上增加额外的间隔

，不允许任何浮动元素进入这个范围内，元素设置clear：属性时，他的外边距并不改变，之所以会向下移是这个清除区域造成的。

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

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

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

display和visiblity有什么区别

主要在于visibility:hidden占据空间，无法点击，另一个display:none;不占据空间，无法点击。

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

每个元素都具有三维空间位置，除了水平和垂直位置外，还能在 "Z轴" 上层层相叠、排列。

元素在 "Z轴" 方向上的呈现顺序，由层叠上下文和层叠级别决定。

在文档中，每个元素仅属于一个层叠上下文。元素的层叠级别为整型，它描述了在相同层叠上下文中元素在 "Z轴" 上的呈现顺序。

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

:hover用于选择鼠标指针浮动在上面的元素。

经试验发现，设置的：hover在Android系统上点击会出现， 但是需要再次点击才会消失；

IOS系统上点击无法出现。

6）HTML5 audio

<audio controls> 

  <source src="horse.ogg" type="audio/ogg">  

<source src="horse.mp3" type="audio/mpeg">

您的浏览器不支持 audio 元素。

</audio>

control 属性供添加播放、暂停和音量控件。

在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本 。

<audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件，

浏览器将使用第一个支持的音频文件

明天计划的事情：（一定要写非常细致的内容） 

修改任务7争取通过
遇到的问题：（遇到什么困难，怎么解决的） 

1）使用Bootstrap 在用CDN的链接，传到github上面发现失效，格式乱了。

修改为本地Bootstrap引用，用的是之前师兄下载的

不过出现的问题就是有一个页面生效（在投票页面成功使用），另一个页面的页面出现神奇的问题（这个页面在），页面布局变了，引用方式如下，不知道是不是引用顺序出现了问题（而且关键的是这个页面我没有引用，可能是某个定义的参数，和bootstrap重名了而导致的）

之前使用过min-width，也导致在本地正常，上传到github上出现页面部分向左偏移。

2）还有小图标的问题，在web端使用chrome浏览器调试正常，但是在安卓端看的时候出现了问题，图标由四个一行变成了3+1有一个被挤在了下面，改了很久，最后使用弹性盒子，加不换行解决了。

3）然后就是音频按钮操控音频的问题，使用absolute的话会把盒子整体挤宽出现水平滚动条，暂时不知道怎么解决。

收获：（通过今天的学习，学到了什么知识）

了解了audio，了解了rgb和opacity的区别