今天完成的事情：  看了看常见的布局格式，熟悉bootstrap，观看学员手册。

明天计划的事情：再看一天去尝试下任务八？

遇到的问题：看基础没什么问题。 

收获：

任务七深度思考：

1.什么是CSS sprites？

CSS Sprites就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。利用CSS Sprites能很好地减少网页的http请求，加快速度。

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

float（浮动），浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

什么是脱离文档流？  元素脱离文档流之后，将不再在文档流中占据空间，而是处于浮动状态（可以理解为漂浮在文档流的上方）。脱离文档流的元素的定位基于正常的文档流，当一个元素脱离文档流后，依然在文档流中的其他元素将忽略该元素并填补其原先的空间。

脱离文档流的三种方法： 浮动，绝对定位，固定定位。

使用float可以脱离文档流，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。 

使用absolute :position脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。

清除浮动：

1. 在父级div上定义height

2. 在结尾处添加新的标签 clear:both

3. 父级div定义:after伪类和zoom

.outer:after{
content:"";
display:block;
height:0;
overflow:hidden;
clear:both;
}
.outer{
zoom:1;/*兼容IE浏览器*/
}

4. 父级div定义overflow:hidden

5. 父级div一起浮动

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

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

z-index用于指定已经定位的元素（position:relative/absolute/fixed）在文中的堆叠顺序。按照数值放置，高的在上面。 

当z-index不为auto时，将产生堆叠上下文。

处在堆叠上下文的元素的z-index只在当前父元素下有效，子堆叠上下文被看做是父堆叠上下文中一个独立的模块，相邻的堆叠上下文完全没关系。意味着如果一个元素位于一个最低位置的层，那你z-index设置得再大，它也不会出现在其它层元素的上面。

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

:hover用于选择鼠标指针浮动在上面的元素，可用于所有元素，不只是链接。。。手机上是没有hover特效的，当你点击的时候就直接触发click.。

手机端有touch事件。touchstart，touchmove, touchend。PC上使用mouseover和mouseout。

触摸事件(touch)会在用户手指放在屏幕上面的时候、 在屏幕上滑动的时候或者是从屏幕上移开的时候触发。

html5增加了audio和video这俩元素来添加音频视频。

音频<audio src="xxx.mp3" controls></audio>

其中src是多媒体的链接，controls属性是告诉浏览器要包含基本的播放控件。

常用属性：

preload 告诉浏览器如何下载⾳音频。

有三种值，auto让浏览器后台下载整个文件

metadata告诉浏览器先获取音频文件开头的数据块确定基本信息

none表示不必预下载

autoplay 告诉浏览器在加载完成一篇之后立即播放

loop 表示循环播放

视频video和audio几乎是一样的用法，只是比起audio来要多出3个属性：

height，width和poster。height和width用于设置视频可视窗口的高和宽的。

poster用于设置替换视频的图片，使用这个图片的情况一般有三种：

1、视频第一帧还未加载完毕的情况；

2、preload属性设置为none时；

3、没有找到指定视频文件时。

外边距合并：当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

【当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。

假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并。】

只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

自适应网页设计"的核心，就是CSS3引入的Media Query模块。自动探测屏幕宽度，然后加载相应的CSS文件。

1.  <linkrel="ystlesheet"type="text/css"media="screen and (max-device-width: 600px)"

2.  href="style/css/css600.css" />

如果屏幕宽度小于600像素（max-device-width: 600px），就加载css600.css文件。

1.  <linkrel="stylesheet"type="text/css"media="screen and (min-width: 600px) and (max-device-width: 980px)"

2.  href="css600-980.css" />

  如果屏幕宽度在600像素到980像素之间，则加载css600-980.css文件。