今天完成的事情：

            今天用SCSS完成了任务十二的重构。

            SASS属于一种更加高级的编译语言，在HTML里面浏览器无法直接读懂它的语言、

            SCSS则是属于CSS的一种升级版，在HTML里面是属于那种可以直接读懂的，在SCSS里面写代码和在CSS里面的写法差异是一样的，只不过SCSS里面会直接帮助你优化类名代码，和重用之类的功能，而这个具体的功能我在昨天的日报里讲到过，换种更加通俗的语言来讲，就是你在CSS里面有三百行代码，而我在SCSS里面只用一百行代码，而我们的代码能起到同一个作用。

            在任务十二的重构中，我发现了我以前代码的许多不足：

             在布局中，我以前是采用《display：flex》来进行布局：

             那个时候为了布局的准确性我可能会上一张透明的图片来垫上去，

               来达到《display：flex》的三个DIV：

                 但是这种布局由于DIV的大小不一，就会在缩放时候造成布局的不稳定性：我的按钮居中就由于DIV大小不一而蹦掉。

           在这次重构中我把这种定位方式都更换成了更加无脑的绝对定位，

    而这种定位方式在页面的缩放中也不会影响到由于绝对定位脱离文档流的特性，在经过层级优先之后，页面缩放之后，别的DIV都会隐藏在我设置了决定定位的后面。

明天计划的事情：

          在完成任务十二之后，开始任务十三的重构计划。

遇到的问题：

              在定位布局中，当我在一个又《display：flex》来进行定位布局的地方，把其中一部分由于任务要求设置成绝对定位，而绝对定位的特性造成了这一部分DIV脱离了文档流，《display：flex》由于DIV缺少造成布局崩塌。

             《display：flex》又称弹性盒子，在以前的日报中，我详细的记录了他的具体信息，在这里稍微做下总结；

            《display：flex》的具体信息：

                             弹性布局是一种灵活、响应式的布局方式，目前的主流浏览器Chrome21+、Opear12.1+、Firefox22+、Safari6.1+、IE10+都已支持，可以放心使用

                            弹性布局的使用-弹性布局设置的元素为父元素，其下的所以子元素称为项目（item），如下，div是父元素，div下面的input和button则称为项目

                             这是因为弹性布局下，所有的项目（item）之间默认没有间隔，并且有个特别的地方，就是不给项目设置高度的情况下，所有项目跟父元素等高

           相对定位的具体信息：

                   如果想为元素设置层模型中的相对定位，需要设置position:relative;，它还是会占用该元素在文档中初始的页面空间，通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。

             绝对定位的具体信息：

                  如果想为元素设置层模型中的绝对定位，需要设置position:absolute;，这条语句的作用将元素从文档流中拖出来,将不占用原来元素的空间，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父级元素进行绝对定位。如果不存在就逐级向上排查，直到相对于body元素，即相对于浏览器窗口。

           而静态定位和固定定位不做概述。

   收获：

          在重构任务中，对定位和布局有了新的理解，巩固了基础代码。