【前端】用CSS实现div全屏铺满的方式

在网页设计和开发中，有时我们需要让一个p元素全屏铺满整个浏览器窗口，以实现更加吸引人的视觉效果或者更好地适配不同设备的屏幕大小。

最近遇到一个需求，需要将一个p自动铺满全屏，width会默认铺满，所以不用考虑，只需要对地v的height进行处理。

有以下一段html代码：

我们index.php/tags-653.html" >可以使用一下三种样式，来让这个p铺满全屏：

1. 使用绝对定位和100%宽高

这种方法通过将p元素的位置设为绝对定位，并且设置其宽度和高度为100%，来实现全屏铺满效果。

具体的CSS代码如下所示：

.full-screen-p {    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;}

在这个例子中，我们给目标p元素添加了一个类名 .full-screen-p，然后通过CSS设置其位置为绝对定位，顶部和左侧都为0，宽度和高度都为100%，从而使其全屏铺满整个浏览器窗口。

2. 使用vh和vw单位

另一种常见的方法是使用vh（视窗高度）和vw（视窗宽度）单位，它们分别表示视口高度和宽度的百分比。通过设置p元素的宽度和高度为100vh和100vw，可以使其全屏铺满整个浏览器窗口。

示例代码如下：

.full-screen-p {    width: 100vw;    height: 100vh;}

3. 使用Flexbox布局

Flexbox布局是一种强大的CSS布局模型，可以方便地实现各种布局效果，包括全屏铺满。

通过设置父容器的display属性为flex，并且设置子元素的flex属性为1，可以实现子元素全屏铺满父容器的效果。

示例代码如下：

.container {    display: flex;}.full-screen-p {    flex: 1;}

注意，这里.container是.full-screen-p的外层p。

在这个例子中，我们给父容器添加了一个类名.container，然后将其display属性设置为flex，使其成为一个flex容器。

然后，给目标p元素添加类名.fullscreen，并设置其flex属性为1，这样就可以使其全屏铺满父容器。

总结

你可以根据实际需求和项目要求，选择适合自己的方法来实现全屏效果。

不管做什么，只要坚持下去就会看到不一样！