css设置全屏拉伸

CSS 设置全屏拉伸基础概念

CSS（层叠样式表）是一种用于描述HTML文档样式的语言。通过CSS，可以控制网页的布局和外观。全屏拉伸是指将一个元素扩展到浏览器窗口的整个宽度和高度。

类型

全屏背景：将背景图像或颜色扩展到整个屏幕。
全屏元素：将某个特定的HTML元素（如<div>）扩展到整个屏幕。

应用场景

网站首页：通常用于展示网站的标志、口号或重要信息。
图片或视频展示：用于全屏显示图片或视频，提供沉浸式的用户体验。
游戏或交互应用：用于创建全屏的游戏界面或交互元素。

示例代码

以下是一个简单的示例，展示如何使用CSS将一个<div>元素设置为全屏拉伸：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全屏拉伸示例</title>
    <style>
        .fullscreen-div {
            width: 100vw;  /* 100% 视口宽度 */
            height: 100vh; /* 100% 视口高度 */
            background-color: #4CAF50; /* 背景颜色 */
            color: white; /* 文字颜色 */
            display: flex; /* 使用Flexbox布局 */
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
        }
    </style>
</head>
<body>
    <div class="fullscreen-div">
        <h1>全屏拉伸示例</h1>
    </div>
</body>
</html>