布局那点事儿

1. flex布局出现较大空隙

出现缝隙	正常情况
image.png	align-content: flex-start;
display: flex; flex-wrap: wrap;	display: flex; flex-wrap: wrap; align-content: flex-start;

2. css布局，固定定位元素不设置高度，自动出现滚动条

主要用在实现上边有固定栏不动，左边有菜单栏不动，只有右边的内容出现滚动条

.wrap{
  background-color: #EDF2F5;
  box-sizing: border-box;
  padding: 17px 16px 15px;
  width: auto;
  height: auto;
  position: fixed;
  top: 70px;
  left: 220px;
  right: 0;
  bottom: 0;
  overflow-y: auto;
}

元素的left,top,right,bottom都要设置好

3.transform限制fixed属性

当元素使用transform属性时，其子元素position: fixed;定位会被限制

.m-question-wrap {}

.m-question-wrap.fadeInRight {
  animation: fadeInRight .3s;
}
@-webkit-keyframes fadeInRight {
  0% {
    transform: translateX(20px)
  }

  100% {
    transform: translateX(0)
  }
} 

fixed被限制	fixed正常情况
fixed被限制，红色框起来的部分延时一会儿才到底部去，体验不好	正常情况，红色框起来的部分一直在底部

后面把transform属性去掉了，换成其他方式实现

.m-question-wrap {
  position: relative;
}

.m-question-wrap.fadeInRight {
  animation: fadeInRight .3s;
}
@-webkit-keyframes fadeInRight {
  0% {
    left: 100%;
  }
  100% {
    left: 0;
  }
}