今天完成的事情：

修改任务三，中间的介绍没有完全居中，利用弹性盒子flex中的主轴居中把子容器居中，同时设置子容器的足有外边距，让中间的文字无论多宽都可以居中。

分析任务5的界面，采取头栏-内容-底栏三段式的布局，头栏和底栏用fixed绝对地位，分别设置top:0和bottom:0 宽度100%，高度和字体用vh单位保证不同高度像素下字体不会溢出。

中间内容用一个人物介绍框div加一个标题框div加上5个详细内容框，5个内容框中在嵌套2个div

1.标题框中字体前面的竖线高度和字体是一样大小的，所以采用一个空div设置border:right，控制空框的高度，后面的内容字体在一个div。

2.下面的5个框格式一致，因为每一个框下面都有一个边框线，并且左侧不是连接到边的，所以给父容器设置padding-left，再设置border-bottom。子容器在下划线右侧开始，所以设置margin-left。设置padding-right让右侧的border可以和div空开距离。

明天计划的事情：

完成人物介绍框的排版。人物介绍框准备用一个div做背景，上面叠加头像框div和简介框div，这2个框相对父容器是垂直居中的，介绍框中可能还需要分上下2个div下面还要插入坐标的图片。

遇到的问题：

在人物介绍这块div中 如果使用background-image来设置图片会导致图片会因为分辨率改变拉升变形。如果用了div装载图片，头像和简介的div还不能覆盖在底图div上层同时进行排版。

图片高度超出了容器的高度，使用overflow:hidden无效。需要把容器设置为position:relative后可以生效。

宽度自适应出现问题，根据任务的动态gif看出在宽度拉升的时候介绍栏前面的空隙并没有变化，单纯是后方的div变长了，为了达到这个效果，前面的div用了px，并且为了不出现改变宽度像素所有内容都缩放，在head中加入了这句

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

添加后宽度增加没有问题，宽度减少时会让宽度不能自适应。暂时没解决，推测是不是可以设置宽度在某个像素值的时候对整体进行缩放，或者响应式能改变布局，让水平排列的2个容器各自独占一行显示。

收获：

熟悉flex的使用方法，遇到了一些影响自适应的问题