css实现一个全屏的div

CSS是一种非常强大的前端技术，可以实现许多炫酷的效果。有时候我们希望实现一个全屏的div，来让网站看起来更加美观。接下来就让我们来看看如何使用CSS实现一个全屏的div吧。

html,body{
  margin:0;
  padding:0;
}

.full-screen{
  width:100vw;
  height:100vh;
  background-color:#ccc;
}

代码中，首先我们需要将html和body的margin和padding都设置为0，这样就可以让全屏div完全覆盖整个屏幕。接下来我们定义一个叫做full-screen的类，它的宽度和高度分别设置为100vw和100vh。其中，vw表示视口宽度，vh表示视口高度。这样就可以让full-screen占据整个屏幕的空间了。我们为了方便，将full-screen的背景色设置为灰色。

接下来，只需要在HTML中引用full-screen类即可：

<div class="full-screen">
  <p>这是一个全屏div</p>
</div>

这样，我们就已经成功地使用CSS实现了一个全屏的div。在实际应用中，我们可以根据需要对full-screen类进行自定义修改，来满足不同的需求。