怎样设置元素的大小与浏览器窗口大小相同

如果有一个类名为.box元素想充满整个屏幕，那么怎样设置呢？
在这里总结了三种方法来进行设置：

• 方法一：使用%来设置，所有基于百分比的尺寸必须从父元素继承，并且如果任一父项未能指定尺寸，则它们的尺寸假定为0px。所以想继承父元素的高度，则需要先设置父容器的高度，即要先将html、body的高度设为height:100%，后将.box的高度设为height:100%

  html, body, .box {
    height:100%;
  }
  

• 方法二：使用vw,vh来设置 ：
  
  vh & vw.png

   .box {
     width: 100vw;
     height: 100vh;
   }
  

• 方法三：使用定位position:absolute来实现(此时.box的父元素应为body)

  .box {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  

以上三种为设置元素大小与浏览器窗口大小相同的方法。当然，方法一和方法三也可设置子元素与父容器大小相同