今天完成的事情：

今天家里有事情请了半天假，下午四点多才开始编码的。

1、完成了header头部的编码。

2、学习了flex弹性盒子中的justify-centent中的属性并在header中运用。

flex弹性盒子中的垂直居中和水平居中的justify-contnt属性；

flex弹性盒子的属性是给父级元素设置作用于子级元素的。

明天的计划：

1、了解bootstrap中的下拉菜单的编码操作，怎么运用并完成列表框的编码操作。

2、完成body内容主体的ul无序列表的制作。

遇到的问题：

1、我在header头部里设了justify-content：center水平居中和align-items：center垂直居中后，网页效果如图1：

 上下是居中对齐的，

后面我给button用div写flex，把flex放在div里，没有设置height，flex的网页显示如图2：

css代码：

div盒子就会被挤上去，除非给div设置高度，就能解决这个问题。会出现这个原因是因为div的高度和header高度不一致才会出现上图的现象。

设了height：50px；后就能如图1一样居中对齐。就能解决这个问题。

2、在header中用div套img那个地标图，对flex的用法不熟悉，我以为给div设置justify-centent：flex-end就能有效果，但是在网页没有效果，后来还是用绝对定位解决的，让地标图用right值往右移达到自己想要的效果。如下图3：

3、对于bootstrap中的下拉菜单如何套用，有点不太理解，不知道该去看那些重点。

4、对于运用flex弹性盒子，只知道现在用了能达到什么效果，但是不知道给谁设置后会有什么其他的影响，就如问题一，原来是因为div的height和header的height不一致导致的。

收获：

flex弹性盒子很神奇，用flex都不用设置css内外边距的样式就能达到居中的效果，可以简化好多代码，一定要熟悉flex的运用。