编辑日报内容..

今日完成：

任务五完成一部分。理解三种流分布原理及使用方法。请假半天，离昨日计划完成任务量差的比较多。明日陆续补上。

明日任务：

1. 任务五

2. 垂直居中方法

今日遇到的问题：

1. 上面部分设置了宽度百分之百，但是发现并没伸展开，经过师兄指点，是最后一行的内容写的太多导致水平滚动条出现，而滚动条随最后的内容展开，但是上面的部分宽度就不再使用手机测试，解决滚动条的问题可以用overflow:hidden。

2. 由于给装了文字的div块设置了高度，然而文字高度大于所设置的高度，导致内容溢出了，如果想让div块有高度的话，用padding更好一些。

3. 在用图片作为背景图片时，图片设置了宽度，元素设置了宽度为100%，图片不会铺开100%，需要设置background-size。

4. 目前给元素定位，还只会用绝对定位， 而且代码很冗余，设置了很多div，接下来会多看看其他人的做法，优秀的代码。

今日收获：

1.三种流分布

  -1.普通流

    position : static – 元素框正常生成。即上述不对元素进行任何样式设置的默认形态。

position : relative (此时设置top, right, bottom, left生效) – 相对于它的原点定位，元素仍保持其未定位前的形状，它原本所占的空间仍保留。

-2.绝对定位

position : absolute – 将该元素从文档流中删除，原来的占位不再存在，并相对于其最近的已定位祖先元素定位（如果不存在已定位的祖先元素，则相对于其根祖先元素定位，即或<</span>canvas>）。不论该元素为块级元素还是内联级元素，定位后该元素将以块级元素的形式显示。

 position : fixed – 与absolute 大致相同，只是相对于当前视窗定位（即滚动条滑动时当前元素位置不会随之改变）。

注1：绝对定位的元素不在文档流中，因此会覆盖其他元素。

注2：设置当前元素position : absolute时，应将其父元素position : relative。

  -3.浮动

   l float : left 或float : right –- 将元素从原来的占位中删除，向左或向右漂浮，直到碰到包含块的边框，或另一浮动元素的边框为止。不论该元素为块级元素还是内联级元素，定位后该元素将以块级元素的形式显示。

注：只有在position为static或relative，或继承了父元素的static或relative时，浮动才生效。

浮动场景：浮动框总体宽度超过容器：浮动框块下移，直到有足够的空间

心然博客：https://www.cnblogs.com/xinran476460042/p/5407736.html

2.flex布局

       参见阮一峰博客 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

       Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为 Flex 布局。行内元素也可以使用 Flex 布局。

     属性及用法比较丰富，阮一峰博客有实例。