今天完成的事情：

1.换了一种方法完成任务四。

明天计划的事情：

1.用flex布局写任务一。

2.做任务五。

遇到的问题：

1.用标准文档流布局要求对于标签的属性特点清晰，今天花了大量时间

对于实现垂直水平居中的方法，使用条件和使用方法还没有特别熟悉。

收获：

1.对于常用几种标签的属性，块元素和行内元素等特性有了进一步的认知。

  比如说布局任务四的header时

要让他们三个都垂直居中，登录要水平垂直居中。一开始我硬要用标准文档流来写，

那么首先他们必须是行内元素，否则无法排列在一行。如果要用vertical-align：middle写的话

子元素必须要是inline-block，或者用table-cell代替比较麻烦。相对简单的方法是设置line-height和父元素的

line-height相等。然后设置 关闭 和 注册 的margin-left/right就可定位。

但是将登陆水平定位就很麻烦，要平分 登陆 的margin-left/right。计算十分麻烦。

实际上只要header遵循标准文档流即可，里面的子元素可以少许使用绝对定位，因为绝对定位也是相对于父元素进行定位的。只要主体符合标准文档流，后期维护和更改就方便一些。

后来选用将 关闭 和 注册 使用float定位。设置好margin就可以定位。（注意要设置line-height，line-height包括字体高度和行距，不设置line-height会默认出现一个行距，会让文本有一个偏移）

下一步注意要将登录设置为display：inline-block。或者直接用span。不然会出现

父元素设置text-align：center即可。    也可以用div，然后margin：0 auto；

或者三个都用float实现。

2.

布局这里时出现的问题是。img标签和input无法同时垂直居中对齐。百度说原因是这样

需要同时设置vertical：middle才可以。顺便实现垂直居中。

当然这里也可以设置三个float实现。像任务一的九宫格。

3.区分boder和outline。在给button取消边框效果时发现，少设置哪项都不行。

outline的效果是被选中时出现一个黄色边框。

outline: none;设置取消。

border 的效果是周围出现阴影

个人理解是border每个盒子都有，是外边框样式。而outline不是，他的作用是为了突出元素。给用户反馈，表示选中了这个元素。

4.

使用这种方法实现垂直居中时，无法设置margin。（单元格没有margin）