昨天遇到的问题：子集出现在父集之中会继承父集的半透明显示。

解决方法：使用position值来定位子集位置覆盖父集

.bottom {
    height: 150px;
    background-color: #29bde0;
    opacity: 0.5;
    margin-top: -160px;
    position: relative;

}

.button1 {
    float: left;
    font-size: 40px;
    width: 270px;
    height: 85px;
    background-color: #f66f6f;
    color: #fef6f6;
    border-radius: 10px;
    position: absolute;
    top: 1155px;
    left: 20px;
    border: none;
}

.button2 {
    float: right;
    font-size: 40px;
    width: 270px;
    height: 85px;
    background-color: #fbb435;
    color: #fef6f6;
    border-radius: 10px;
    position: absolute;
    top: 1155px;
    right: 20px;
    border:none;
}

深度思考

1.什么是CSS sprites？  

CSS Sprites通常被称为css精灵图， 在国内也被意译为css图片整合和css贴图定位，也有人称他为雪碧图。 就是将导航的背景图，

按钮的背景图等有规则的合并成一张背景图，即多张图合 并为一张整图， 然后再利用background-position进行背景图定位的一种技术

为什么需要css sprites？

CSS Sprites 并不是一门新的技术了，目前他发展的已经比较成熟，阿里巴巴、百度、谷歌 等各公司的网页中到处都可以发现CSS Sprites 的影子。

他是网页里常见的一种图片应用处理方式，他允许你将一个页面里所涉及到的所=有的零星 的图片都整合到一张大图中去，

这样一来，当访问这个页面时，所加载的图片就不会像以前那样 一张一张的慢慢显示出来了，对于当前的网络所流行的速度来说，

不超出200kb的单张图片所需 要的加载时间基本是差不多的，节省加载速度的关键不是降低重量，而是减少个数，

就因为计算 机都是按照byte计算。页面每显示一张图片都会向服务器发送一次请求。所以，图片越多，所请 求的次数就越多。

为了减少HTTP的请求次数，很多网站的导航背景图、登录框、按钮背景图等使用的并不是 <img>标签，而是CSS Sprite

css sprites的优势：

优势：通过整合图片，减少对服务器的请求数量，减少图片的体积从而减轻服务 器的负担，提高网页的加载速度

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

浮动

在了解什么是浮动之前我们先了解一下html元素在普通流排列方式。在普通流中，元素是按照它在 HTML 中的出现的先后顺序自上而下依次排列布局的，

在排列过程中所有的行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为一整行。如果没有特殊样式指定，

所有元素默认都是按照普通流方式排列布局，即普通流中元素的位置由该元素在 HTML 文档中的位置决定的。

浮动使元素脱离文档普通流，漂浮在普通流之上的。浮动元素依然按照其在普通流的位置上出现，然后尽可能的根据设置的浮动方向向左或者向右浮动，

直到浮动元素的外边缘遇到包含框或者另一个浮动元素为止，且允许文本和内联元素环绕它。浮动会产生块级框（相当于设置了display:block），

而不管该元素本身是什么。

float属性

在css中可以通过float属性实现元素浮动，float属性定义元素在哪个方向浮动，它有两个值float:left 和 float:right，默认值为none 

设置这两个值元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

浮动使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻浮动元素会停下来（padding也算）

浮动元素之后的元素将围绕它，之前的元素将不会受到影响

特点

不区分行、块、行内块元素，使用浮动直接让元素变为块级

支持宽高、margin、padding，但不支持margin：auto

不会有空隙问题(块级不存在基线对齐)

方法1：父级div定义 height

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。

优点：简单、代码少、容易掌握

缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题

方法2：

使用clear属性：在相同的父元素中，浮动的子元素之后添加一个空标签，设置样式为："clear：both;"标签可以是div，也可以是p，或者br等块元素。

原理：left在左侧不允许浮动元素; right在右侧不允许浮动元素; both在左右两侧均不允许浮动元素点我使用clear属性

优点：通俗易懂，容易掌握，适合菜鸟前期使用。

缺点：可以想象通过此方法，会添加多少无意义的空标签，有违结构与表现的分离，一旦代码量大的话，在后期维护中将是噩梦。

方法3：对父元素设置overflow的样式，即overflow: auto/hidden;

原理：必须定义width，在IE6中还需要触发 hasLayout ，例如 zoom：1，同时不能定义height，使用overflow:hidden时，

浏览器会自动检查浮动区域的高度。

优点：不存在结构和语义化问题，代码量极少

缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，不能和position配合使用，无法显示需要溢出的元素；

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

rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，

而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）

比如，我们写透明的黑色部分都是用opcity（0.5），但这带出来一个问题就是如果你在这一div上写字的话，

然后那个字体也会变成透明色。所以我们采取rgba的样式写，前面三个数字分别对应r,g,b,的三种颜色，第四位的数字对应的是透明的系数。

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

z-index是什么？

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

该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。

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

hover定义：

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

css中hover属性的使用方法：可以在选择鼠标指针浮动在上面的元素中使用，

例如在css中添加以下语法格式“标签选择器:hover {样式代码;}”格式进行使用，

共有4种使用方式比如：

1、直接在悬浮元素上改变样式；2、改变子元素的样式；3、改变同级元素的样式；4、改变就近元素的样式等。

手机端没有hover特效，当你点击的时候就直接触发click（点击）。

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

IOS系统上点击无法出现；

手机虽然没有鼠标，但是有触摸事件.

一开始触摸事件是ios版Safari浏览器为了向开发人员传达一些信息新添加的事件。 因为ios设备既没有鼠标也没有键盘，

所以在为移动Safari浏览器开发交互性网页的时候， PC端的鼠标和键盘事件是不够用的。

在iPhone 3G发布的时候，其自带的移动Safari浏览器就提供了一些与触摸(touch)操作相关的新事件。

 随后，Android上的浏览器也实现了相同的事件。触摸事件(touch)会在用户手指放在屏幕上面的时候、 

在屏幕上滑动的时候或者是从屏幕上移开的时候触发。

遇到问题：对于深度思考中的z-index和叠加上下文是如何形成的问题理解的不够透彻。

明天计划：开始下一个任务。