一、今天完成的事情：

1、理了一下nomal flow、float还有position ablution的相关知识。

根据师兄建议，看了BFC的相关内容。

2、照着flex的常用属性的demo码了一遍，可惜还是不太熟练，直觉告诉我，他很重要。

3、做出了任务5的前五，把header、footer做出来了。

额，main部分还在做。构思已经有了，大体写了一下，但是没弄完。

二、遇到的问题：

1、关于BFC的理解。有障碍。个人理解（也不知道对不对）：

触发BFC属性的元素相当于自己独立关在小黑屋，对外界木有影响。

但是两个div在同样的BFC属性margin在会叠加，或者说折弯这是什么原因？

（是和以前学习机械绘图的图层类似？？？）它和z-line属性有什么关系吗？？

2、然后就是任务5，我在做buttom的时候遇到了一点麻烦。

想要用flex写。额。。。flex属性好多，查了一下，

用space-around属性能非常简单的解决这个问题。水平平分里面的两个button。

3、这里卡了一下，和任务四一样不太好弄。

然后想起师兄给过意见用<span>来处理。去看了一波<span>。

感到“|”这东西原来有的？？！！输入“|”加<span>完美

然后解决了。呼。。。我对键盘是多陌生啊，真丢脸T-T

4、对于这块，我的思路是，文本占大多数而且有很大的相似性。所以，考虑到用<ul>、<li>来写。样式细节再慢慢改。这里卡了一下，一开始不知道什么原因，其实是，这里的<ul>默认自带有padding的值，如图，记得去掉。

三、收获：

1、理了一理之前的知识，尤其是position的，也总结了一下昨天涉及的定位方案：

• 普通流 (normal flow)

• 浮动 (float)

• 绝对定位 (absolute positioning)

Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念

。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

• body 根元素
• 浮动元素：float 除 none 以外的值
• 绝对定位元素：position (absolute、fixed)
• display 为 inline-block、table-cells、flex
• overflow 除了 visible 以外的值 (hidden、auto、scroll)

理解花了大量的时间，感觉效果并不是那么明显，运用的时候，和认知很难践行......

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

1、按照构思还有前天看的background的知识，把任务5其他的部分做出来。

2、找点flex的案列自己敲一下。任务五的课后深度思考。

3、写一下任务五的总结，或者说是思维导图。时间充裕的话，开始任务六。