今天完成的事情：

                      学习了汉堡菜单制作方法，学习了侧滑栏制作方法，学习轮播图制作方法  
明天计划的事情：

                      学会轮播图自动手动轮播原理以及实现
遇到的问题：

                     轮播图的原理有些模糊不清楚，导致用层级做出来的轮播图只能播放一次。。。。。。。
收获：               

           借鉴网上的效果，自己结合任务做的汉堡菜单：

<div class="dropdown">
    <input type="checkbox" id="h1">
    <label for="h1" class="hamburger"> <span></span></label>
    <ul>
        <li>首页</li>
        <li>推荐</li>
        <li>合作</li>
        <li>关于</li>
    </ul>
</div>

.dropdown{
      text-align: right;
  }
  label {
      display: inline-block;
      position: relative;
      font-size: 0;
      width: 33px;
      height: 33px;
      border: none;
      cursor: pointer;
      background-color: #00bcd4;
  }
  label:focus {
      outline: none;
  }
  label span {
      display: block;
      position: absolute;
      height: 3px;
      top: 15px;
      left: 6px;
      right: 6px;
      background-color: #fff;
  }
  label span:before,
  label span:after {/*before和after与span重合，需要进行上移和下移*/
      content: "";
      display: block;
      position: absolute;
      width: 100%;
      height: 3px;
      background-color: #fff;
  }
label span:before {
      top: -8px;/*相对于中间的span上移10px*/
  }
  label span:after {
      bottom: -8px;/*相对于中间的span下移10px*/
  }
  input {
      display: inline-block;

      display: none;
  }
  input:checked  ~ ul{
        display: block;
          background-color: red;
      }

  .dropdown ul {
      /*position: absolute;*/
list-style: none;
      list-style-type: none !important;
      text-align: left;
      /*width: 100%;*/
background-color: #fff;
      /*z-index: 1;*/
margin: 0 !important;
      padding: 0;
      display: none;
      box-sizing: border-box
  }

  ul li {
      list-style-type: none;
  }

  .dropdown ul li:hover {
      background-color: #5fc0cd;
      
color: #FFF;
 }
.dropdown ul li {
      box-sizing: border-box;
      list-style: none;
      padding: 15px;
      background-color: #fff;
      color: #5fc0cd;
      cursor: pointer;
      text-align: center;
      border: 1px solid #e1e5e7;
      border-top: none;
  }

• 2.学习BFC 及其相关知识点

•            Formatting context是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系、相互作用。Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context(简称IFC)。CSS2.1 中只有BFC和IFC, CSS3中还增加了G（grid）FC和F(flex)FC。 　

•          BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。       　

• .BFC的生成

        BFC是一块渲染区域，那这块渲染区域到底在哪，它又是有多大，这些由生成BFC的元素决定，CSS2.1中规定满足下列CSS声明之一的元素便会生成BFC。

             ----  根元素

            ---- float的值不为none

           ----- overflow的值不为visible

            -------display的值为inline-block、table-cell、table-caption（display：table也认为可以生成BFC，其实这里的主要原因在于Table会默认生成一个匿名的table-cell，正是这个匿名的table-cell生成了BFC。）

            ------- position的值为absolute或fixed

  3. BFC的约束规则

  --------内部的Box会在垂直方向上一个接一个的放置

  --------垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生重叠（塌陷），与方向无关。）

  --------每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）

  -------BFC的区域不会与float的元素区域重叠

  --------计算BFC的高度时，浮动子元素也参与计算

  ---------BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然。

  BFC在布局中的应用

• -----  -防止margin重叠（塌陷）：
  

•      两个相邻Box垂直方向margin重叠            相邻Box水平方向margin重叠

• -------- 清除内部浮动

• 参考资料 https://juejin.im/entry/59c3713a518825396f4f6969

•                

• 
  

•