一、今天完成的事情：

1、看了backgroud的相关知识。拍了入学视频，更新了wiki。

2、试着看了一下任务5的涉及知识，编程规范。

3、学习了flex，内容好多；

4、大体构思了任务5。尝试做header部分。

二、遇到的问题：

1、晚上的时候做任务5。以为任务四过关，额...，其实没过，有一些问题。

做任务四header的时候，用了position:fixed；这是个根本性理解错误- =///

解决办法：验收标准有一条“移动端：header始终固定顶部”，我弄巧成拙，其实并不用特地的设置

（而且，fixed也不是这样用的），被师兄批斗回去复习深度理解一波position、文本流的相关知识。，改任务4。

2、这是着手任务5开始的遇到的问题。相信很多人也会踩坑，

无论是单一的text-aligen:center属性还是display:block  +  float：left  （其实包括昨天有总结几个具体的方法）都没办法消除button所占的空间，请教了几个师兄。找到了解决办法：

（1）用position：absolutive让buttpn直接完全脱离文档流（我真心觉得师兄贼牛批！），至于为何之前我用display:block  +  float：left  不行，具体原因看这里：https://segmentfault.com/a/1190000007357865；使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围！！（float果然是为了环绕而发明的啊，感觉不应该译作浮动......）

（2）给button设置一个20%的位置宽度，中间的“个人主页”区块设置百分之80%，剩下的平分...（百分比可以变，但是思路一样）

（3）最Low的就是再加一个和button尺寸相等的div，这样就像任务四一样平分了...

三、收获：

1.学习了CSS的编码规范，纠正了以前的一些不好的编码习惯。

2、学习了background各种属性，之前任务三我有去研究，但是没有那么全面。

3、了解了一下flex布局，内容很多，但我知道很好用而且很重要。

这里把笔记的贴出来一下：主要是针对常用的属性；具体怎么用，还没实践过，任务5试一下。

先上图。

写在flex-container的属性，但是作用于子项的常用属性：

center: 表示与行中间对其。

写在子项内部的常用属性：

四、（今晚深夜或者）明天的计划：

1、复习一下position、文本流的相关知识，加深了解。

2、修改任务四、写任务五。