今天完成的事情：（完成任务七第三个界面，首先是对布局的居中且左对齐有了一定了解，可以使用flex布局，也可以使用嵌套的方法。给父级设置一个盒子，width=50%。margin：auto；这个方法有一个弊端，就是缩小界面时。盒子内部信息所展示的宽度只有50%。’还可以使用ul法。给ul父级设置一个盒子，设置text-align:center；给ul 设置display：inline-block，text-aligin：left；只要再使用清除ul样式的

    list-style:none;就可以完成居中且左对齐。

其次是了解了rgba()与  opacity:0 的区别。按照我的理解其实很简单。rgba()其实就是给盒子的背景色设置透明度，不会影响盒子里面的元，如图。而opacity：0是对整个盒子或者说对子级的全部元素都设置透明度。会影响所有的元素。rgba()用法，括号里取4个值。前面3个是颜色，后面是透明度。

opacity用法，直接后面带数值设置透明度。opacity：0完全透明。默认opacity：1.不透明。

最后就是跳转链接，给底部设置两个button，代码如下：，即可以跳转到本地的另外一个html 界面。其他两个界面同样适合本方法。

对于深度思考：

什么是浮动?有哪些清除浮动的方法?

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 其实也就是把快级元素变成能和别的快级并排成一行。脱离文档流。

浮动的的元素有4点特性：

    1.浮动元素会脱离标准文档流，已经不区分快和行了。

    2.浮动的元素会互相贴靠。

    3.浮动的元素有“字围”的效果。

    4.收缩。一个浮动的元素，如果没有设置width，那么将自动收缩为文字的宽度。

清除浮动：给浮动的元素的祖先元素加高度（父元素或祖元素）。只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的元素了，也就是说，如果盒子内部有浮动，这个盒子有高，那浮动不会互相影响。所以也就清除了浮动带来的影响。浮动的元素，只能被有高度的盒子关住。

clear：both；清除掉两边的浮动。但是有一个非常致命的问题，margin失效了，上下之间没有了间距。

overflow：hidden；  一个父元素不能被自己浮动的儿子撑出高度。但是，只要给父亲加上 overflow：hidden；那么父元素就能被儿子撑出高度了。  最最最重要的是，使用overflow：hidden；能使margin生效！

display通常可以设置为none、inline、block

visibility通常可以设置为hidden、visible

当display为none，visibility为hidden时，元素都会不见。

display会将元素隐藏掉，并且位置不再被占据，而visibility则是占据原来的位置。像我们任务七第二个界面的12方格下面的四个小图标，就是使用visibility：hidden；还会占据位置。

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

z-index是针对网页显示中的一个特殊属性。因为显示器是显示的图案是一个二维平面，拥有x轴和y轴来表示位置属性。为了表示三维立体的概念如显示元素的上下层的叠加顺序引入了z-index属性来表示z轴的区别。表示一个元素在叠加顺序上的上下立体关系。

层叠上下文:英文叫“stacking content”,是HTML中的一个三维的概念。如果一个元素含有层叠上下文，我们可以理解为这个元素在z轴上就“高人一等”。这里出现了z轴，z轴是我们的眼睛与页面的垂直抽象的距离。

处理两个或两个以上盒子之间z-index的复杂关系？

1,两个div，无设置z-index，第二个粉色div向上移动50px时.

2,两个div，粉色div设置z-index为-5时，

3,黄色div设置z-index为30，粉色为25时，30>25，

4,如果两个元素都没有定位发生位置重合现象或者两个都已定位元素且z-index相同发生位置重合现象，那么按文档流顺序，后面的覆盖前面的。

5,如果两个元素都没有设置z-index，使用默认值，一个定位一个没有定位，那么定位元素覆盖未定位元素

6,如果父元素z-index有效，那么子元素无论是否设置z-index都和父元素一致，在父元素上方

7,如果父元素z-index失效（未定位或者使用默认值），那么定位子元素的z-index设置生效

8,如果兄弟元素的z-index生效，那么其子元素覆盖关系有父元素决定

） 

明天计划的事情：（学习任务八的内容与知识点）
遇到的问题：（主要就是居中且左对齐的方法，进行很多尝试）
收获：（学习到了z-index的含义，隐藏元素的方法。设置透明度的两种方法与区别）

任务七任务总结：

流程：首先布局第一个界面。整体看来，第一个界面有一个header。剩下为主题部分。主题部分分为上下两个盒子。

首先把header布局完成。样式添加完成。在对main进行布局，代码如下。。，这里面右边的箭头符号我使用的插入背景图的方法。但是因为对父级设置了flex布局，影响到icon2点位置，于是使用absolute。其次就是对任务中右边的三角图标定位问题代码如下，出来的效果如下：如果纵向不拉伸的话，三角的位置会保持在白框的中间，如果竖向拉伸了。那么三角的位置会下降，师兄给的解决方法是对父级设置position：relative；在对他设置absolute。相对于父级进行绝对定位，我使用的方法是把top值换成固定的值，也可以达到效果。

然后对中间三个盒子的按钮设置onclick事件，可以跳转到第二个界面；

布局第二个界面，对于第二个界面。能学到的有，1：先对header布局，使用flex布局的

    justify-content: space-between;可以达到效果，还有一个难点就是audio标签的使用，我们把audio标签设置透明度，缩小放到播放器图片上，对audio设置高层级便于点击触发，但是出现问题，audio的播放按钮在左边，由于右边的宽度较长，而我们的播放器图片位置在最右边，如果这样放上去，audio会撑开我们的内容，于是我们使用transform对其进行旋转，使得按钮在右边，这样就解决了。不透明效果。另外学习了对12个盒子设置hover事件，这里使用，即不脱离原来位置隐藏。

然后对footer按钮设置onclick事件。

布局第三个界面：

首先是对布局的居中且左对齐有了一定了解，可以使用flex布局，也可以使用嵌套的方法。给父级设置一个盒子，width=50%。margin：auto；这个方法有一个弊端，就是缩小界面时。盒子内部信息所展示的宽度只有50%。’还可以使用ul法。给ul父级设置一个盒子，设置text-align:center；给ul 设置display：inline-block，text-aligin：left；只要再使用清除ul样式的

    list-style:none;就可以完成居中且左对齐。

其次是了解了rgba()与  opacity:0 的区别。按照我的理解其实很简单。rgba()其实就是给盒子的背景色设置透明度，不会影响盒子里面的元，如图。而opacity：0是对整个盒子或者说对子级的全部元素都设置透明度。会影响所有的元素。rgba()用法，括号里取4个值。前面3个是颜色，后面是透明度。

opacity用法，直接后面带数值设置透明度。opacity：0完全透明。默认opacity：1.不透明。