2018/11/15

今日完成

完成最后一个页面的响应式布局，解决了动画问题，编辑了小课堂。

1、明白了position结合margin：auto实现垂直居中的原理，之前只知道这个方法，小课堂中师弟提出这个问题，后面去研究了一下原理：

当父元素的position是relative，子元素是absolution的时候，设置子元素的上下左右都是0，这个0指的是距离外层relative的父元素的距离，上下左右都距离父元素为0，也就是说这时候就相当于父元素的高宽了。margin:auto水平和垂直都有剩余空间可以分配，就能实现垂直居中。

.margin{
    width: 400px;
    height: 200px;
    background-color: #29bde0;
    position: relative;
}
.child4{
    background-color: yellow;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
   margin: auto;
}

<div class="margin">
    <div class="child4"></div>
</div>

2、重新用transition写了一遍卡片的动画，父元素设置relative，hover设置absolution，默认高度为0，hover的时候高度调整为实际高。

.hiddenText{
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
  height:0;
  color: white;
  border-radius: 5px;
  background: #29b078;
  font-size: 16px;
  transition: 0.5s ease;}
&:hover .hiddenText{height: 461px}

3、解决了下拉导航动画很奇怪的问题，具体怎么解决的我也不清楚原因，F12调试的过程中，好像是删除checked时的浮动，还是有其他神马操作，我都忘记了，竟然神奇的解决多年的结，解决后就把代码改了。想到回去看看怎么回事，之前的代码忘记是啥样的了。-- --！

遇到的问题：暂无。

今日收获：除了轮播图还未完成，完成了剩余的。

明日计划：做轮播图，完成任务14，总结前面的任务。为JS做准备。