今天完成的事情

                调试任务5代码。

                 复习之前学的float，position，水平垂直居中，学习了解如何用css绘制常见图形。

                学习了解如何使用IconFont。了解overflow

明天计划的事情：开始任务6

遇到的问题：  之前自我介绍那一栏没有做到案例效果，之后我突然想起来我用的是table表格，但是我只做了一行一列，于是我做了一行两列，这样文                       字效果在页面拉伸过程中完美展示了。

                       两列之间重叠边框，使用border-collapse: collapse合并边框。

                      第一行只需要一列，右边会有空列，使用colspan="2"合并。

收获

     overflow：visible 默认值。内容不会被修剪，会呈现在元素框之外。

                       hidden 内容会被修剪，并且其余内容是不可见的。 

                     scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 

                      auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

                     inherit 规定应该从父元素继承 overflow 属性的值。

       浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。

      假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。         div的顺序是HTML代码中div的顺序决定的。

         清除浮动可以理解为打破横向排列。清除浮动的关键字是clear，官方定义如下：           

                语法：         clear : none | left | right | both         

                取值：         none  :  默认值。允许两边都可以有浮动对象         

                                    left   :  不允许左边有浮动对象       

                                    right  :  不允许右边有浮动对象       

                                    both  :  不允许有浮动对象

        对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。比如A，B两个div都float：left；那他们此时并排显示，若要B下移到A下面，那就再B加上clear：left，B会下移。

       绝对定位元素的包含块由离它最近的 'position' 属性为 'absolute'、'relative' 或者 'fixed' 的祖先元素创建。只要父级元素设置了position并且不是static（默认既是static），那么设定了absolute的子元素即以此为包含块（最近的）。如果都没有定义，那么就相对于整个文档body定位（注意不是相对于浏览器窗口定位）

       position:absolute与float:left，两者有两大共性：包裹性，破坏性。

        包裹性，换种说法就是让元素inline-block化，例如一个div标签默认宽度是100%显示的，但是一旦被absolute属性缠上，则100%默认宽度就会变成自适应内部元素的宽度。

float也是典型的inline-block化元素，这种元素的inline-block化适用于任何水平的标签。例如平时我们要让span标签支持width属性，可以设置float：left，或者position：absolute。

         破坏性，使元素脱离文档流，容器因此无内容，高度塌陷。

        如果我们同时设置了top和bottom的属性值，那元素又该往哪偏移好呢？

  记住下面的规则：  如果top和bottom一同存在的话，那么只有top生效。 如果left和right一同存在的话，那么只有left生效。

   absoulte是根据祖先类的border进行的定位，若祖先margin改变，子元素位置也改变，而改变padding却不会。

     使用static 定位或无position定位的元素z-index属性是无效的