今天完成的事情：

思考了任务七的深度思考，看了任务八的部分知识。
明天计划的事情：

继续看任务八知识，争取做一个页面。
遇到的问题：

目前没有，一直在看资料。

收获：

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

（1）背景介绍：

凡事都有先后顺序，在CSS中，也是如此。一般情况下，元素都是在一个层面上，看不出差异。但是一旦元素之间出现了重叠，就不可能出现等同关系，就要有个先后顺序，这就产生了层叠顺序和层叠上下文，而z-index则是它们中的一部分。

（2）知识剖析：

什么是层叠上下文？什么是层叠水平?

层叠上下文，英文称作”stacking context”. 是HTML中的一个三维的概念。它是层叠元素的根本，两个层叠元素决定顺序，必须在同一个拥有层叠上下文元素中，也就是它们共同的父级或者祖先级。而作为一个拥有层叠上下文的元素自身严格的说它可以改变自己原先的层叠水平。

层叠水平英文称作”stacking level”，也可以叫层叠等级，决定了同一个层叠上下文中元素在z轴上的显示顺序。

什么是z-index？

w3school给出的定义是：z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

层叠顺序：

正z-index>z-index:0/auto>inline/inline-block盒子>float盒子>block盒子>负z-index>background/border

注意：最重要的一点就是这个层叠顺序的前提是在同一个层叠上下文元素中！

层叠准则

仅靠层叠顺序图，无法处理所有css和html元素层叠时的顺序，所以就有了上面两条黄金准则，他可以处理所有层叠情况。

谁大谁上：当具有明显的层叠水平标示的时候，如识别的z-indx值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。

后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。

层叠上下文的特性

层叠上下文的层叠水平要比普通元素高。

层叠上下文可以阻断元素的混合模式。

层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的层叠上下文。

每个层叠上下文和兄弟元素独立，也就是当进行层叠变化或渲染的时候，只需要考虑后代元素。

每个层叠上下文是自成体系的，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中。

层叠上下文的创建

1. 页面根元素天生具有层叠上下文，称之为“根层叠上下文”。

2. z-index值为数值的定位元素的传统层叠上下文。

3. 其他CSS3属性。

根层叠上下文：指的是页面根元素，也就是滚动条的默认的始作俑者 html 元素。这就是为什么，绝对定位元素在left/top等值定位的时候，如果没有其他定位元素限制，会相对浏览器窗口定位的原因。

对于包含有position:relative/absolute/fixed的定位元素，当其z-index值不是auto的时候，会创建层叠上下文。

z-index值不为auto的flex项(父元素display:flex|inline-flex).

1.元素的opacity值不是1.

2.元素的transform值不是none.

3.元素mix-blend-mode值不是normal. 

4.元素的filter值不是none. 

5.元素的isolation值是isolate.

6.will-change指定的属性值为上面任意一个。 

7.元素的-webkit-overflow-scrolling设为touch.

（3）常见问题：

固定定位元素，滚动时被覆盖。

（4）解决方案：

给需要在最上面的固定定位元素的z-index设置一个正值，形成层叠上下文。

（5）编码实战：

.header {

width: 100%;

padding: 0 15px;

position: fixed;

z-index: 1024;

top: 0;

background-color: #29bde0;

}

<div class="header">

<div class="header-top">

<div class="header-left"></div>

<div class="header-middle">投票</div>

<div class="header-right"></div>

</div>

</div>

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

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

1、为啥HOVER在手机上没效果？

让我们再回顾一下hover的定义...

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

再想一想...

手机上哪来的鼠标啊，SO,手机端没有hover特效，当你点击的时候就直接触发click。

2.常见问题

手机上没有HOVER效果时应该怎么办？

2.解决方案

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

然后来看一下解决的方法...

手机虽然没有鼠标，但是咱有触摸事件啊！

一开始触摸事件是ios版Safari浏览器为了向开发人员传达一些信息新添加的事件。 因为ios设备既没有鼠标也没有键盘，所以在为移动Safari浏览器开发交互性网页的时候， PC端的鼠标和键盘事件是不够用的。

在iPhone 3G发布的时候，其自带的移动Safari浏览器就提供了一些与触摸(touch)操作相关的新事件。 随后，Android上的浏览器也实现了相同的事件。触摸事件(touch)会在用户手指放在屏幕上面的时候、 在屏幕上滑动的时候或者是从屏幕上移开的时候触发。

1.touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。

2.touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间， 调用preventDefault()事件可以阻止滚动。

3.touchend事件：当手指从屏幕上离开的时候触发。

4.touchcancel事件：touchcancel，是在拖动中断时候触发。

（PS:主要的是前三个触摸事件）

3.编码实战

我们注销掉他原本的hover事件代码

/*.main-content-part-role:hover .main-content-part-icon {*/

/*opacity: 1;*/

/*}*/

因为浏览器的问题，我们接下来使用jquery，给.main-content-part-icon（四个小图标的父元素）添加这个命令

($(".main-content-part-icon"));

$(".main-content-part-icon").css("opacity","1");

break;

这样可以在手机端实现了类似于hover的效果。

4.扩展思考

手机上除了触摸事件，还有触摸手势，怎么用呢？

可以利用插件来实现，比如，jQuery里有手势的插件， 移动端的zepto库也有手势插件，还有QuoJS的手势插件（不依赖任何库）。

三、彻底弄懂css中单位px和em、rem的区别

国内的设计师大都喜欢用px，而国外的网站大都喜欢用em和rem，那么三者有什么区别，又各自有什么优劣呢？

（一）px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)

PX特点

1. IE无法调整那些使用px作为单位的字体大小；

2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；

3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。

（二）em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)

      任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

em特点 

1. em的值并不是固定的；

2. em会继承父级元素的字体大小。

所以我们在写CSS的时候，需要注意两点：

1. body选择器中声明Font-size=62.5%；

2. 将你的原来的px数值除以10，然后换上em作为单位；

3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

       也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。

（三）rem特点 

        rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是

一个例子：

p {font-size:14px; font-size:.875rem;}

注意： 

        选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。

px,em,rem单位转换工具：地址：http://pxtoem.com/

四、CSS中box-sizing: border-box;的作用

box-sizing 属性可以被用来调整这些表现:

1.content-box  是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。

2.border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding，内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高。

border-box  width 和 height 属性包括内容，内边距和边框，但不包括外边距。这是当文档处于 Quirks模式 时Internet Explorer使用的盒模型。注意，填充和边框将在盒子内 , 例如, .box {width: 350px; border: 10px solid black;} 导致在浏览器中呈现的宽度为350px的盒子。内容框不能为负，并且被分配到0，使得不可能使用border-box使元素消失。 
这里的维度计算为： width = border + padding + 内容的  width， height = border + padding + 内容的 height。