今天完成的事情：

1         完成任务5

鉴于在任务5过程遇到的问题总结一下居中设置

①  在父元素中设置text-align:center实现行内元素水平居中

将子元素的display设置为inline-block，使子元素变成行内块元素

②  将子元素的display为table，使子元素成为块级元素，同时table还具有包裹性，宽度由内容撑开

③  若子元素定宽，则可以使用绝对定位的盒模型属性，实现居中效果.

.parent{  position: relative;}

.Child {position: absolute;left: 0;right: 0;margin: 0 auto; width: 50px;}

④  通过绝对定位的偏移属性实现水平居中

配合translate()位移函数：translate函数的百分比是相对于自身宽度的，所以left:50%配合translateX(-50%)可实现居中效果

⑤  配合relative

relative数值型的偏移属性是相对于自身的，但百分比却是相对于包含块的。因为子元素已经被设置为absolute，所以若使用relative，则需要增加一层<div>结构，使其宽度与子元素宽度相同

⑥  配合负margin

　margin的百分比是相对于包含块的，所以需要增加一层<div>结构。由于宽度width的默认值是auto，当设置负margin时，width也会随着变大。所以此时需要定宽处理

⑦  使用弹性盒模型flex实现水平居中

在伸缩容器上设置主轴对齐方式justify-content:center

2         开始任务6

梳理一下左边定宽右边自适应的两列布局方法

第一种方法：浮动布局

关键点： 先让固定宽度的div浮动！使其脱离文档流。 margin-left的值等于固定div的宽度相等。

方法二：利用margin负值。是固定宽度的div脱离文档流。 利用marin负值可以使得，后面的div可以与前面的div 保持同行显示。 给包裹内容的div加margin-left 可以使得与左边的文字不重叠

明天计划的事情：

1继续完成任务6

2继续学习bootstrap布局

3继续任务6

遇到的问题：

任务5遇到元素垂直居中问题

任务6中遇到下拉菜单设置问题

收获：

拓宽了居中设置的思路，也了解了CSS样式实际是灵活多变的，用不同的手段只要最终能达到效果即可。有时候陷入一种思维，反而会僵住。要发散自己的思维。