今天完成的事情：

1.今天把任务七完成了

2.查看了资料：自适应中如何用雪碧图。

3.了解了“前端优化”

4.什么是css sprites

5.rgba和opacity的区别

6.display:none和visibility:hidden的区别

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

8.了解了兄弟选择器

明天计划的事情：

开始任务8的学习

完成一个完整的PC端项目

遇到的问题：

在bootstarp，引用的CSS,JS中 .min与无.min的区别：

.min是压缩版（全部被排成一行），用于线上。

无.min的是开发用的。

<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 ">

把样式都写上是为了媒体查询，自适应布局

写移动端页面时单位最好用vw vh会方便点

收获：

自适应中如何用雪碧图：

1.雪碧图：有的页面可能需要很多的svg矢量图，如果一个个加载的话，会很慢影响页面加载速度，所以需要把他们和在一张图上。

     SVG：是W3C在2000年8月发布的一种新的二维矢量图片的格式。（矢量图：也称做是面向对象的图像。它是根据几何特性来绘制图形。可以无级缩      放，不模糊，不变色。矢量图形文件和分辨率还有图像大小无关。）

2.看了下这个https://www.cnblogs.com/xuechenlei/p/5944209.html页面的资料，要想实现雪碧图自适应，

需要用到CSS中的值：background-size。单位：rem。

b3.ackground-size又有几个属性： cover|contain。cover:等比例放大图片，直至宽/高与盒子宽/高一致。

                    contain:放大图片直至宽高与盒子宽高一致。

CND建立在网络上的内容分发网络，依靠部署在边缘各地的服务器。提高用户访问响应速度和命中率。可以分流服务器的访问，有缓存服务器用回应用户的访问。

前端优化（列举几个理解的。http://www.cnblogs.com/xuechenlei/p/5888060.html）：

1.合并引用的CSS、Javascript。并使用压缩模式。

2.合并引用的小图标。雪碧图。

3.为页面缓存考虑，引用外联样式。

4.资源文件夹放在同一个服务器。避免不靠谱的CND。

5.CSS&JAVASCRIPT内容优化

 ·css引用写在头部，javascript引用写在底部、使用异步加载，避免渲染等待；

 ·避免在页面标签中写样式；

 ·不过度引用字体，字体大小问题；

 ·值为0的时候不用单位

 ·使用标准的浏览器前缀。

 ·不滥用页面浮动

 ·避免复杂dom循环操作

 ·id的工作效率比class高，但id还是少用（dom多了会不方便）。

 ·使用事件代理代替绑定事件；

6.图片优化

 ·压缩图片。工具gulp

 ·使用web（google开创），他有更优的图像压缩算法，能带来更小的图片体积，以及肉眼识别无差异的图片质量。

 ·使用CSS、svg、fonticon（矢量图标库）等代替图片。

7.Dom渲染优化：

　·使用简洁的html标签结构，避免复杂嵌套；

　·使用css3书写动画，减少jsdom操作；

　·适当使用svg、canvas；

　·避免最下级元素书写页面class

什么是CSS sprites

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景 图片的位置。俗称雪碧图

大大的减少了http的请求次数，减少了服务器的压力，大大的提高了页面性能。

CSS样式生成工具下载：http://www.99css.com/cssgaga/

但是他在开发、维护时比较麻烦。

rgba和opacity的透明效果有什么不同？

opacity有继承性，且子级无法摆脱.

rgba没有继承性，设计颜色时可以用这个。

可以利用rgba创建渐变透明效果：

rgba(0,0,0,1)-rgba(0,0,0,0.2)

display和visiblity有什么区别？

display:none 可以让元素脱离文档流消失，原有的空间被折叠。

visibility:hidden 可以让元素隐藏，但是依然会占据原来的文档流。

就是displayde会回流与渲染，而visibility没有这个影响前端性能的问题。回流则是重新使该页面渲染一次，从而影响性能。渲染是浏览器处理的过程。

display:none有很强的的株连性，父级一旦设置，其余子级都会消失不见，无解。

visibility:hidden 伪株连性，父级设置后，子级会消失不见。但如果子级设置visibility:visible则可以免受父级株连。

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

层叠上下文是基于Z轴的一个环境，且这个环境一直存在。

默认层叠顺序：同级元素中，后面的元素覆盖前面的元素。

         父级元素中，子级元素覆盖父级元素。

一个元素想控制自身的z轴层叠顺序，必须满足DOM上的这些结构， 这个元素不能含有子元素，且这个子元素的第一个父元素不能控制自身的z轴层叠顺序，即不能含有定位和z-index这两个css属性

z-index只能在position的非static属性中使用。用来设置被定位元素Z轴上的一个顺序。

https://www.cnblogs.com/benbendu/p/5811534.html

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

https://www.jianshu.com/p/2c5248ddcfd7

大概了解下：

想要在手机上实现:hover的效果需要借助"触摸事件"：

除了触摸事件还有触摸手势，同样需要jQuery来实现。

对于任务7需要掌握的三点

CSS伪类(结构选择器、:hover)

audio

透明(rgba、opacity)

基本了解

兄弟选择器~

兄弟选择器与相邻选择器的区别： https://blog.csdn.net/u014291497/article/details/50482874

兄弟选择器就是：在同父级元素下选择指定元素后的所有的指定元素。

思维导图：

进度：task7

任务开始时间：2018.5.15

预计结束时间：2018.5.21

是否有延期风险：无

禅道：http://task.jnshu.com/zentao/project-task-687.html