CSS——浏览器兼容问题

大神的总结  大神总结

1、使用flex布局，容器高度丢失，父容器使用 overflow: auto; 可找回高度

#app .screen{
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  display: flex;
  flex-direction: column; //关键代码
}
.screen .content{
  flex: 1;
  overflow: auto;          //关键代码
}

2、使用flex布局，父容器需要有高度，子容器才能实现弹性

3、margin垂直合并，当margin-top与margin-bottom相遇时（两个盒子之间没有其它标签），它们会合并成一个margin（取最大的margin值，如果一正一负，则合并的margin值为相加后的值）