今天完成的事：侧边浪 限宽 

遇到的问题：了解了侧边栏

知道了侧边栏的基本结构

首先要有一个CHECKBOX 然后给它一个ID

#sidemenu{
display: none;
}
#sidemenu:checked + aside {
/*为被选中的sidemenu后的aside设置属性（紧邻）*/
 left: 0;
 /*点击按钮即选中checked后,侧边栏位置变为贴着左边,配合ease-out使用,有渐变滑出的效果*/
 display: block;
}
#sidemenu:checked ~ .wrap {
padding-left: 50%;
 margin-right: -50%;
 /*为被选中的sidemenu后的wrap设置属性（非紧邻）*/
}
aside {
display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  /*侧边栏,初始位置为-50%，即隐藏效果*/
  left: -50%;
  width: 50%;
  background: #ffffff;
  transition: 0.2s ease-out;
  /*动画效果的执行方式是ease-out，即侧边栏滑动效果为渐变式，而不是生硬的突然变化*/
  ul{
margin: 60px 0;
  }
li {
display: flex;
    align-items: center;
    width: 100%;
    height: 1.8em;
    list-style: none;
    color: #29bde0;
    font-size: 18px;
    border-bottom: 1px solid;
    span{
margin-right: 60%;
      margin-left: 10%;
    }
img{
width: 20px;
    }
}

a {
text-decoration: none;
  }

}
/*以上侧边栏*/

知道了是如何制作侧边栏的了解了父相子绝这个概念

有几点请大家了解（可以不看）：

1、relative相对定位会在标准流当中占位置；

2、absolute绝对定位不会在标准流当中占位置；

3、绝对定位一定要有参照物才能相对参照物进行定位；

4、绝对定位是 相对于距离它最近的已经定位的祖先元素 进行定位

5、不一定非要“子绝父相”，子绝父绝也是可以的

正题：为什么不用“子绝父绝”？

首先：比如广告横幅右上角“关闭按钮”（我们的本意是要让图标“浮”在广告横幅上面，不占据标准流当中 的位置）所以按钮图标只能用绝对定位。

横幅和关闭图标的关系

然后：这时图标的绝对定位的一定是相对它最近已定位的祖先元素（我们这里把也就是横幅）定位的；

所以最后：子绝已经是确定了的，这时最近的祖先元素（父）有两种情况：

1、如果使用了“子绝父相”：也就是①横幅（最近的祖先元素）是相对定位，这时横幅是在整个标准流当中占据位置的，下面的内容不会被顶上来。②关闭图标是绝对定位，正好是相对父元素横幅进行的定位。

2、如果使用了“子绝父绝”：虽然“关闭图标”是放在了横幅的正确位置上，但是这个时候横幅也是绝对定位，也会“浮”起来，这时候下面标准流的内容就会顶上来，被横幅遮盖住。

总之：把脱离文档流的元素放在不脱离文档流（需要占位置）的元素上就要用“子绝父相”

又温习了一下栅格系统和网格布局

Bootstrap的栅格系统包括五种宽带预定义，用于构建复杂的响应布局，你可以根据需要定义在特小.col、小.col-sm-*、中.col-md-*、大.col-lg-*、特大.col-xl-*五种屏幕(设备)下的样式。

今天有点水，明天努力。

明天的事：任务13完成，任务14开始。