html怎么设置4个方块

在HTML中设置四个方块，我们可以使用div标签来实现，下面我将详细介绍如何使用HTML和CSS来创建四个方块，并对它们进行样式设置。

我们需要创建一个HTML文档，在这个文档中，我们将使用div标签来创建四个方块，以下是具体的步骤和代码：

html怎么设置4个方块

1、创建HTML结构：

Markup

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>四个方块</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="box box1">方块1</div>
        <div class="box box2">方块2</div>
        <div class="box box3">方块3</div>
        <div class="box box4">方块4</div>
    </div>
</body>
</html>

2、创建CSS样式：

我们需要创建一个名为styles.css的CSS文件，用于设置四个方块的样式，以下是具体的CSS代码：

CSS

/* 设置整体页面样式 */
body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}
/* 容器样式 */
.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    width: 80%;
    height: 80%;
}
/* 方块样式 */
.box {
    width: 200px;
    height: 200px;
    background-color: #fff;
    margin: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-weight: bold;
    border: 2px solid #000;
}
/* 以下是针对每个方块的特殊样式，可选 */
.box1 { background-color: #ffcc00; }
.box2 { background-color: #ff6666; }
.box3 { background-color: #66cc99; }
.box4 { background-color: #9966cc; }