position:absolute; top:0; left:0; bottom:0; right:0; margin: auto; width:420px; height: 420px;

.box2 {
    position: fixed;
    width: 420px;
    height: 420px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background: red;
}

回答一

简单点说，高宽和可视区域，一般做遮盖层的时候用。如果position是absolute的时候，就和父元素大小一样。另外如果再加上margin: auto；并指定width和height可以达到垂直和水平居中的效果

回答二

这样写的目的是让这个层充满整个屏幕，在写弹窗效果时经常会这样用，但这个题中给body设置的，目的是使body充满屏幕，不让body滚动。

• top和bottom可以同时设置的
• fixed和absolute是近亲，是相对于浏览器的viewport定位，往页面的右上角看，那个二维码就是用fixed。建议去了解一下。
• 还是去了解下position吧。
• 效果是让这个层充满整个屏幕。