任务名称：css-task7

成果链接：https://dongjiayu2018.github.io/learn/task7/task7.html

官方脑图：

个人脑图：

任务总结：

一、什么是CSS sprites

利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因。

CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。

解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。

background-position：x, y：

定义：背景图片相对容器原点的起始位置。

        取值：

                  关键字：top | center | bottom | left | center | right

                  百分比：百分数

                  具体值：px、rem、em等确值

                  默认值为：0% 0%（即坐标原点）

         容器：background作用的元素，即其视口，超出该容器的部分，将被隐藏。，以容器的起始点作为原点（0，0）绘制背景图片的起始位置坐标轴。

         background-position将定义背景图片起始于坐标轴的哪个位置，浏览器将其他部分隐藏，仅显示容器内的背景内容。

         二、什么是浮动？清除浮动的方法

float属性值：left、right、none

浮动的特性：

包裹性

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

破坏性

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

常见的清除浮动的方法：

（1）clear属性
left:元素左侧不允许有浮动元素
right:元素右侧不允许有浮动元素
both:元素左右两侧均不允许有浮动元素

（2）给浮动元素父级设置高度
高度塌陷是应为给浮动元素的父级高度是自适应导致的，那么我们给它的设置适当的高度就可以解决这个问题了.
缺点：在浮动元素高度不确定的时候不适用

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

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

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

（5）使用AFTER伪元素

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

三、z-index和叠加上下文是如何形成的

z-index语法：

z-index: auto(自动，默认值) | integer(整数) |  inherit (继承)

z-index 接受的属性值为：关键字auto和整数，整数可以是负值。

z-index 只能应用于定位元素（即设置了 position 属性为非 static 值），其它情况下，z-index 将被忽略。

什么是层叠上下文（STACKING CONTENT）

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

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

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

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

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

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

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

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

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

:hover用于选择鼠标指针浮动在上面的元素，可用于所有元素，不只是链接。

手机上是没有鼠标的···