今天完成的事：1、修改好了task5-1的文件，能够做到基本的自适应，但还是不够好。

              2、通过制作demo了解了三列布局的两种方法及其不同点。

              3、初步学习了flexbox布局方法。

明天计划的事：完成task5-2，总结display属性的用法及其值的用法。

遇到的问题：无

收获：

    一、实现三列布局的两种方式：

    1、使用float实现三列布局，中间自适应需要将中间栏的html放在左右栏后面，即html书写顺序：左右中；若要保持左中右的顺序不变则需要设置中间栏的margin为负值。

    2、使用position实现三列布局中间自适应时，body高度随中间栏高度变化而变化，若侧边栏高度超出了中间兰边框则会溢出（如图），所以用position实现三列布局时有两种情况：（1）中间栏高度最高。（2）没有边框。

    二、居中的常用方法及试用范围

    1、水平居中：

       行内元素：对齐父元素使用text-align:center，文字直接对p元素使用。

       块级元素：设定宽度后使用margin:0 auto实现居中。

    2、竖直居中：

       （1）将line-height和height设置一样高，通常用于单行文本；

       （2）‍‍利用css table，设置元素table结构，并应用vertical-align: middle实现垂直居中，常用于多行文本、图像、块状元素，需要IE8以上版本；‍

       （3）使用绝对定位position：absolute，top和left均设置为50%或者使用负的margin值，仅适合于大小固定的元素。还有一种方式就是定位时将四个方向都设置为0然后使用margin：0来让元素垂直居中。绝对定位的弊端就是会使元素脱离文档流。‍

       （4）FlexBox布局：使用display：flex将元素设置为弹性盒子，在对其设置justify-content：center可使其水平对齐，设置align-items可使其竖直对齐，两者都设置则可垂直居中对齐。主要弊端是web兼容性较差，但移动端无影响。（这里只是简单总结了使用flexbox居中对齐的方法，flexbox还有许多强大好玩的属性，后面再总结。）

参考资料：http://www.ddcat.net/blog/?p=233                                                       ‍‍垂直对齐：vertical-align属性‍‍

                 https://segmentfault.com/a/1190000002784054#articleHeader0       ‍‍ vertical-align属性与垂直居中‍‍

                 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html                 ‍‍flex布局语法篇——阮一峰‍‍