今天完成的事情：今天完成了任务七，期间出现了设置font-size:62.5%;在有些电脑上不起作用的后果，百度后知道了是因为有些电脑的谷歌浏览器默认最小字号是12px，就算调成0也不管用。知道了为何当初看别人讲解rem这个单位的时候要设置625%而不是62.5%。后来进行了任务七小课堂的学习，具体学习已写在下方总结中。然后开始进行任务8，开始写第一页，遇到的轮播图还没有去做，看官网的情况应该还有响应式，也需要去做，准备明天做。

任务总结：

任务名称：CSS-task6

成果链接：任务七

日报链接：任务七

任务耗时：2019.6.23-2019.6.26，无延期

个人脑图：

官方脑图：

任务总结：

1.任务七做的比较慢，感觉自己敲代码总是要想一下这个元素里面放置什么，选用什么属性可以做到，明明顶部和底部只有top和bottom的区别，但是还是需要想一下先用定位还是先用弹性盒子，逻辑性有些弱了，需要加强。

2.在做雪碧图的时候，一个页面上的几个图标大小不一样，当时脑残把几个放一起，结果光是位置就调整好久，还不如单独拿出来用，以后要改正。

3.进行盒子的尺寸设定的时候，某一个盒子的几个尺寸用了不同的单位，不仅难看还不好换算，后来统一改为一种，rem这个单位在某些电脑上被锁死为最小是1rem=12px，再小就失效了，因此要么直接用px，要么把rem规定成font-size：625%；让其1rem=100px。

4.在把按键或者其他子元素用链接包裹后，没有给链接设置宽度，使得只有文字可以点击进入链接，后来增加a元素宽度属性，让其包裹的整个元素范围都可以点击进入链接。

5.在进行音频放置的时候，音频条过长，超出页面，使用display：none；会让音频失效，用visibility: hidden;又无法让其不占空间，界面出现横轴滚动条，后来使用旋转，将其转至页面内，再用透明度让其看不到但是可以触发。

深度思考：

1.什么是CSS sprites？  

CSS sprites就是雪碧图，通常是把大小相同的很多小图标进行合成，将其变为一张图，使用时只需要记住图标所占空间的大小和其在总图中的位置即可。好处是引用时只需要引用一张图，加快了浏览器的解析速度，因为浏览器解析图片的快慢与张数有很大关系，解析一张需要进行一次http请求，以此类推，因此张数减少可以有效提高效率。

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

浮动是指使用float使当前元素脱离标准文档流，进行特定顺序的排列方式，用left，right，none三种，没有上下浮动，因为标准文档流本身就是上下排列，使用浮动后还会出现和标准文档流重叠的情况，但是遇到文字的时候会出现文字环绕的效果，听说当初设计浮动就是为了这个效果。清除浮动可以给父元素增加超过子元素的高度，但是很少用。其次是使用clear清除浮动，后果是会使margin失效，还有一种偏方是给父元素加overflow：hidden;也可以清除浮动。

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

opacity的透明会使父元素和其后代都透明，rgba则是给当前元素的背景或者背景图设置透明度，不影响其他元素，display：none；会使元素直接消失且不占空间，其内的后代元素也会消失，并且无法通过其他方法显示，visiblity：hidden；则是将其内容隐藏，空间仍然占据，其内的后代元素还可以使用visible进行显示出来。

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

z-index相当于描述html的z轴，通常情况html只有x轴和y轴需要设定，当一些元素出现重叠后，就会需要设置z轴进行确定前后顺序，同一个层叠上下文元素当中：正z-index>z-index:0/auto>inline/inline-block盒子>float盒子>block盒子>负z-index>background/border，以此确定重叠后显示的先后顺序，确保需要的元素不被遮挡。

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

因为hover是鼠标指在当前元素时出现的属性，手机端没有鼠标，因此可以添加一个触发事件来达到目的。