今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin） 

完成任务五。

任务五总的来说了解了如下：

一）一个是背景图，在背景图上面加模糊。

图片设置

背景图片填满整个盒子

background-image:url("../image/医生背景.png");

    background-repeat: no-repeat;

    background-size: 100% 100%;

    -moz-background-size: 100% 100%;

/* 设置cover参数，背景图片会按照比例缩放填充满整个背景 */

    background-size: cover;

图片加模糊：

filter:blur(3px);

二）.一个是overflow：hidden

在用圆形框头像时，任务头像为方的，需要隐藏溢出部分，使用overflow：hidden。

三）.另一个时z-index

z-index用来控制元素重叠时堆叠顺序。

适用于：已经定位的元素（即position:relative/absolute/fixed）。

一般理解就是数值越高越靠上，好像很简单，但是当z-index应用于复杂的HTML元素层次结构，其行为可能很难理解甚至不可预测。因为z-index的堆叠规则很复杂，下面一一道来。

首先解释一个名词：

stacking context:翻译就是“堆叠上下文”。每个元素仅属于一个堆叠上下文，元素的z-index描述元素在相同堆叠上下文中“z轴”的呈现顺序。

z-index取值：

默认值auto：

当页面新生成一个box时，它默认的z-index值为auto，意味着该box不会自己产生一个新的local stacking context，而是处于和父box相同的堆叠上下文中。

正/负整数

这个整数就是当前box的z-index值。z-index值为0也会生成一个local stacking context，这样该box父box的z-index就不会和其子box做比较，相当于隔离了父box的z-index和子box的z-index。

四）使用了ul和il元素

这里使用同类型对齐的时候有一个坑，一个是span的使用。

我是用span的时候，在四层li结构中出现了第一层li结构没有套用到。写的字在第二层的li，相当于每一层都平移了一层。不过由于为了对齐使用了很多元素，导致后面代码贼乱，所以也不知道是什么原因。

使用内容对齐遇到了一个难点就是

这个的自我介绍的居中问题。

解决之前是

一直在li的底部，后来使用：vertucal-align：middle才成功居中。

但是对于vertical-align：middle不是特别了解。还需要看一下具体问题在哪里。

目前网上查询的是

Vertical-Align：

这个属性主要目的用于将相邻的文本与元素对齐。而实际上，verticle-algin可以在不同上下文中灵活地对齐元素

明天计划的事情：（一定要写非常细致的内容） 

任务六，完成并提交任务五
遇到的问题：（遇到什么困难，怎么解决的） 

文本居中问题，已解决。使用verticle-algin

收获：（通过今天的学习，学到了什么知识）

完成了任务五