今天完成的事情：修改了任务十三的bug，开始了任务十四，完成了input轮播效果。
明天计划的事情：任务十四 
遇到的问题：暂无
收获：对position和overflow了解更深入一点，但还是欠缺些火候。

           学会input建立轮播图。

任务十三bug处。

在body里添加overflow：hidden无效的原因。

看了很多人的日报，都是在body的下面建立的div盒子，再去放置overflow：hidden，使其达到任务效果。但是这种措施，觉得不是很妥当。

然后问了大师兄后，给出的解决办法是在html里添加overflow：hidden，以及在body添加position：relation和overflow：hidden，就可以不用添加盒子而达到效果。

但是对于原理，理解了添加position的原因，是因为子元素aside有绝对定位，所以要去寻找父元素，所以给body添加position：relation。

对于只有在html和body里同时添加overflow：hidden才能起作用的原理，还未想明白

关于overflow的理解

第一  理解溢出：

一般情况下，父容器里面会有很多子元素，我们常常不设置父容器的高度，让父容器height为auto，则父容器高度就可以随着子元素的高度而变化，即始终会包裹着子元素。

但是如果我们给父容器固定了高度，当子元素高度>父容器的高度，就会溢出，这时候我们设置父容器overflow：hidden，就会把超出父容器的内容隐藏，这就是隐藏溢出。

当父容器height:auto时，会自动调整大小，内容永远不会溢出，当使用overflow：hidden，就会自动为父容器设置高度。

简单说：overflow:hidden要有宽度或者高度才会溢出部分隐藏，如果外部盒子没有宽度或者高度，里面又是浮动元素，就会被撑开。

任务十四：input轮播图

<div class="轮播图大盒子">

    <input type="radio" checked="" name="需要展示内容的盒子名字" id="A">

    <input type="radio" name="展示内容的盒子名字" id="B">

    <input type="radio" name="展示内容的盒子名字" id="C">

  <div id="wrap">【与input内容相关的大盒子】

        <ul id="展示内容的盒子名字">【放置展示轮播的图片】

            <img src="图片"><img src="图片"><img src="图片">

        </ul>

    <div id="圆点">用一个div嵌套是为了更好的放置它在容器内的位置。

      <label id="圆点1" for="A"></label>  

      <label id="圆点2" for="B"></label>

      <label id="圆点3" for="C"></label>

    </div>

    <label id="箭头1" for="A"></label>

    <label id="箭头2" for="B"></label>

    <label id="箭头3" for="C"></label>

  </div>

</div>

相关原理：

一、运行原理：用input将图片、箭头、圆点、联系到一起。

input先与展示的内容联系到一起。通过input的name=展示内容盒子

input（图片内容）与箭头联系在一起。通过input的id与箭头label的for联系在一起。

input（图片内容）与圆点联系在一起。通过input的id与圆点label的for联系在一起。

二、展示原理：运用浮动让图片成为一行。即在ul里的子元素 float: left；让ul的父容器wrap的宽度等于3倍的图片的宽，此时图片就能排列在一行，然后用checked，通过margin的改变，让他们每次移动一张图片（margin-left: -100%; }）；从而达到效果。

css如下：

/*以下是设置input*/
 input{/*隐藏input的默认圆点框*/
   display: none;
 }
/*以上是设置input*/

/*以下是设置圆点*/
圆点盒子 {/*圆点盒子，为了使3个圆点成一行，且利用调整所在位置*/
  display: flex;
  justify-content: center;/*使圆点居中*/
  position: absolute;/*圆点所在的位置*/
  width: 100%;
  top: 84%;
  label { /*设置为圆点形状*/
    width: 10px;
    height: 10px;
    border-radius: 50%;/*设置为圆点形状*/
    margin-right: 8px;
    border: 1px solid #d0d6d9;
    cursor: pointer; /*设置光标为小手*/
    &:hover {/*设置hover效果*/
      background: #d0d6d9; }
  }
}

/*以下input（图片）与圆点联系到一起*/
#A:checked ~ 圆点1 {
background-color: #d0d6d9; }

#B:checked ~ 圆点2 {
background-color: #d0d6d9; }

#C:checked ~ 圆点3 {
background-color: #d0d6d9; }
/*以上input（图片）与圆点联系*/
/*以上是设置圆点*/



内容大盒子{   /*input所联系的所有内容盒子*/
  width: 100%;
  overflow: hidden;/**/
  position: relative;
}

展示图片盒子 { /*轮播图片盒子*/
  padding: 0;
  //margin-left: 0;
  width: 300%; /*因为3个图片*/
}

图片 {
  width: 33.33%;/*slider是300%那一张图片就是300%*33.33%=100%*/
  height: 30vw;
  float: left; /*轮播的原理之一，让他们排列到一行上，所以slider的宽度是300%；然后通过checked让他们每次移动100%即实现图片转换*/
} 

/*input与图片联系到一起*/
#A:checked ~ 展示图片盒子{ /*轮播的原理之二，他们排列到一行上，然后通过checked让他们每次移动100%即实现图片转换*/
margin-left: 0; }

#B:checked ~ 展示图片盒子 {
margin-left: -100%; }

#C:checked ~ 展示图片盒子 {
margin-left: -200%; }
/*以上input与图片联系*/

箭头{/*控制箭头属性*/
position: absolute;
 top: 50%;
 left: 8%;
 width: 10px;
 height: 10px;
 border-top: 5px solid #e7e7e7;
 border-right: 5px solid #e7e7e7;

 cursor: pointer; }
/*控制箭头初始位置*/
箭头1 {
transform: rotate(-133deg);
}
箭头2 {
transform: rotate(45deg);
 display: none;
}

箭头3 {
transform: rotate(-133deg);
 display: none; }

/*以下input（图片）与箭头联系到一起*/
#A:checked ~ 箭头2 {/*控制箭头的位置*//*刚开箭头23不显示，箭头1点击后他们在显示，然后运用position使他们出于盒子两边*/
  display: block;
  cursor: pointer;
  left: 90%; }

#A:checked ~ 箭头3 {
  display: block;
  cursor: pointer; }


#B:checked ~ 箭头2 {
  display: block;
  cursor: pointer; }

#B:checked ~ 箭头3 {
  left: 90%;
  display: block;
  cursor: pointer;
  transform: rotate(45deg); }


#C:checked ~ 箭头2 {
  display: block;
  cursor: pointer;
  left: 8%;
  transform: rotate(-133deg); }

#C:checked ~ 箭头1 {
  display: block;
  cursor: pointer;
  left: 90%;
  transform: rotate(45deg); }
/*以上input（图片）与箭头联系*/