任务7

1.什么是CSS sprites？ 

1.背景介绍在计算机图形学中，sprites指的是包含于场景中的二维图像或者动画。最开始这项技术是应用于街机游戏中，里面的人物和可移动物品大多数都是应用了sprites，为啥要叫sprites（精灵）呢？精灵并不是帧缓冲中位图数据的一部分，而是“悬浮”于帧缓冲中的数据之上，没有对其中的数据产生影响，就像幽灵和精灵一样。CSS精灵也差不多是这个意思，可以将原本需要多张图像文件分别显示，整并为单一图像文件的分区显示技术，借由减少下载图像文件数量，提高网页的显示性能。

2.知识剖析那这项技术为啥能减少http请求呢？到这里就要提一下，浏览器在加载网页的时候图片文件及外部的JS、CSS文件都需要单独下载，JS是堵塞HTML下载进程的，图片是另外开启进程来下载的，不同的浏览器会有不同的同时下载图片的数量的限制或者一个或者五个或者十个，反正是有限制的，所以如果一个遍布了图片的网页，或者一系列网页，即使你网速再快也要分批次的下载这些图片。而且每个图片的下载都是一次完整的HTTP请求-响应。而把很多小图片集中到一张图片上这样在只需要一个HTTP请求-响应，在现在网速条件下不超过200k的图片下载速度是差不多的，下载一次之后无论是该页面还是站点其它页面使用包含在这张大图上的图片的时候就可以使用缓存，不会带来反复下载的开销，所以只有一个HTTP请求-响应。所以使用CSS sprites最大的好处就是减少HTTP请求，加快网站响应速度，提高网站性能。有同学可能会问了，多几个HTTP请求真的会那么严重吗？如果使用一张大图，那么很可能大图中有几个图片用不到，这不是多加载内容了吗，和多几次HTTP请求开销差距有那么大吗？还有一个好处，这样不但快了，还省流量了，因为HTTP请求-响应会在客户端和服务器端交互HTTP报文，所以下载一个图片所用流量不只是图片大小，每个HTTP报文会占用网络流量的。也许有同学会问，谁会在乎那点而流量，你别说还真有人在乎，如果你不是自己机房，而是把服务器放在别人机房就知道流量也是很贵的，如果你的网站每天被访问数十亿次，这点儿流量就会让你肉疼了。更别说对众多的手机用户了，流量都是钱呐！3.常见问题如何实现CSS sprites4.解决方案1.我们需要找到需要使用的小图标，然后对图标进行切图，切出来我们需要的图片或者图标。2.将这些切好的图片拼接在一起,这里我们可以使用photoshop，但是更好的是很多前辈制作了许多sprites图生成工具，也就是俗称的雪碧图生成工具，下面我给大家演示一下。好了，我们做好需要使用的雪碧图，现在需要将这个图应用到我们的网页中，利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。根据雪碧图中图标的具体像素大小，再规定元素的具体大小，然后使用background-position找到图标的位置。元素大小相当于相机机头，background-position相当于移动相机找到我们需要的景物，下面给大家简单的演示一下。1. 假设合成之后的雪碧图宽是 W1, 需要显示的子图片宽度是 W2, 以子图为背景的标签宽度是 W3，background-size的宽度是x2. 有公式 x/W3 = W1/W2 => x = W1*W3/W23. 所以 background-size 的宽度值为 W1*W3/W2优点上面也提到了，通过减少下载图片的数量以减少http请求数量，减少http报文，节省流量，增加访问速度，提高网页的性能。这是它最大的优点。缺点1.每次制作雪碧图都很繁琐，增大前端和UI的工作量。2.雪碧图制作完成之后，维护特别困难，每次要加或者换图片都需要重新制作一整张图片。3.难以实现自适应，图片的大小都限定死了。4.由于图片的位置需要固定为某个绝对数值，这就失去了诸如center之类的灵活性。前面我们也提到了，必须限制盒子的大小才能使用CSS Sprites，否则可能会出现出现干扰图片的情况。这就是说，在一些需要非单向的平铺背景和需要网页缩放的情况下，CSS Sprites并不合适。解决方式是，加大图片之间的距离，这样可以保持有限度的缩放。5.编码实战spritesdemo6.扩展思考雪碧图如何自适应雪碧图常规的方案一般会做几套不同大小的图去适应不同的设备尺寸把整图整体缩放...你别用雪碧图啊 不要死心眼 就是这样雪碧图常用在哪里

apple

亚马逊

CSS Sprites常用来合并频繁使用的图形元素，如导航、LOGO、分割线、RSS图标、按钮等。通常它们不会作为网页内容出现，因为涉及内容的图片并不是每个页面都一样。

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

1.背景介绍

什么是float

 浮动最开始出现的本意是用来让文字环绕图片

但是早期的前端开发者发现：浮动的元素可以设置宽高并且可以内联排列，是介于inline和block之间的一个神奇的存在， 在inline-block出来之前，浮动大行其道。直到inline-block出来后，浮动也有它自己独特的使用场景。

浮动的定义：使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素才会停下来。

float属性值：left、right、none

2.知识剖析

浮动的特性

 包裹性

首先包裹性很好理解，一个block元素不指定width的话，默认是100%，一旦让该div浮动起来，立刻会像inline元素一样产生包裹性，宽度会跟随内容自适应。

破坏性

这里破坏性是指元素浮动后可能导致父元素高度塌陷。

浮动破坏性原理： 因为浮动元素被从文档正常流中移除了，父元素当然还处在正常流中，所以父元素不能被浮动元素撑大。 高度塌陷：浮动元素父元素高度自适应（父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷）

常见的清除浮动的方法、

（1）、clear属性

left:元素左侧不允许有浮动元素

right:元素右侧不允许有浮动元素

both:元素左右两侧均不允许有浮动元素

none:默认值，允许浮动元素出现在两侧

（2）、给浮动元素父级设置高度

高度塌陷是应为给浮动元素的父级高度是自适应导致的，那么我们给它的设置适当的高度就可以解决这个问题了.

缺点：在浮动元素高度不确定的时候不适用

（3）以浮制浮（父级同时浮动）

缺点：需要给每个浮动元素父级添加浮动，浮动多了容易出现问题。

计算BFC的高度时，浮动元素也参与计算

float属性不为none

position为absolute或fixed

display为inline-block, table-cell, table-caption, flex, inline-flex

overflow不为visible

（4）br 清浮动

br 标签自带clear属性，将它设置成both其实和添加空div原理是一样的。

（5）使用AFTER伪元素

通过父元素的::after伪元素来生成浮动元素的兄弟元素，然后兄弟元素使用clear:both方法。

3.常见问题

使用after伪元素清除浮动不生效？

4.解决方案

clear只对block元素起作用

需要对产生高度塌陷的元素使用after，而不是浮动的元素本身

1、使用空标签清除浮动。 我用了很久的一种方法，空标签可以是div标签，也可以是P标签。这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清除浮动，并为其定义CSS代码：clear:both。此方法的弊端在于增加了无意义的结构元素。
对于使用额外标签清除浮动（闭合浮动元素），是W3C推荐的做法。至于使用<br />元素还是空<div></div>可以根据自己的喜好来选（当然你也可以使用其它块级元素）。不过要注意的是，<br />本身是有表现的，它会多出一个换行出来，所以要设定它的heigh为0，以隐藏它的表现。所以大多数情况下使用空<div>比较合适。

　2、使用overflow属性。 此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。使用该方法是只需在需要清除浮动的元素中定义CSS属性：overflow:auto，即可！也可以用overflow:hidden；”zoom:1″用于兼容IE6，也可以用width:100%。不过使用overflow的时候，可能会对页面表现带来影响，而且这种影响是不确定的，你最好是能在多个浏览器上测试你的页面；

3、使用after伪对象清除浮动。 该方法只适用于非IE浏览器 。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置height:0，否则该元素会比实际高出若干像素；要注意的是：从content属性是必须的，但其值可以为空，蓝色理想讨论该方法的时候content属性的值设为”.”，但我发现为空亦是可以的

4、浮动外部元素，float-in-float。这种方法很简单，就是把“#outer”元素也进行浮动（向左或者向右）。但是这种方法带来的别外一个问题就是和父级相邻的下一个元素会受到父级的影响位置会产生变化，所以使用这种方法一定要小心。有选择把页面中的所有元素都浮动起来，最后使用一个适当的有意义的元素（比如页脚）进行清理浮动，这有助于减少不必要的标记，但是过多的浮动会增加布局的难度。（这时候元素不会独占整行，因为元素也被设置为浮动类型了）

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

一.背景介绍1.什么是RGBA？rgb大家都熟悉，红red，绿green，蓝blue，三原色。那现在我们所说的grba又是什么呢？说得简单一点就是在grb的基础上加进了一个通道alpha。

可以看做是用来定义透明度的。a的取值范围是0-1之间，不可以是负值，r、g、b三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。2.什么是OPACITY？也是一个css3属性，该属性用于设置元素的不透明度级别，所有的浏览器都支持这个属性。opacity 中文翻译为：不透明度。语法：opacity：value | inherit ;取值说明: value 不透明度，从0.0(完全透明)到1.0（完全不透明）。3.什么是DISPLAY：NONE将元素与其子元素从普通文档流中移除。这时文档的渲染就像元素从来没有存在过一样，也就是说它所占据的空间被折叠了。元素的内容也会被屏幕阅读所忽略。隐藏起来。4.什么是VISIBLITYw3school上给的定义 定义和用法 visibility 属性规定元素是否可见。 提示：即使不可见的元素也会占据页面上的空间。请使用 "display" 属性来创建不占据页面空间的不可见元素。二.知识剖析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，那么这个子孙元素又会神奇般地显现出来。对比总结： display:none是个相当惨无人道的声明，子孙后代全部搞死（株连性），而且连块安葬的地方都不留（不留空间），导致全体民众哗然（渲染与回流）。 visibility:hidden则具有人道主义关怀，虽然不得已搞死子孙，但是子孙可以通过一定手段避免（伪株连性），而且死后全尸，墓地俱全（占据空间），国内民众比较淡然（无渲染与回流）。

opacity，rgba的对比

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

1.背景介绍

层叠上下文，就是在呈现的时候决定哪个元素在上、哪个元素在下，初学的时候觉得这东西应该就是跟z-index的大小有关，然而并没有这么简单，我们来感受下。

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