html中如何设置4个盒子

在HTML中，我们可以使用CSS来设置盒子的样式。下面是一个简单的例子，展示如何设置4个盒子，每个盒子都有不同的背景色：

      <style>
        .Box {
          width: 100px;
          height: 100px;
          display: inline-block;
          margin: 10px;
          border: 1px solid black;
        }

        .Box1 {
          background-color: red;
        }

        .Box2 {
          background-color: blue;
        }

        .Box3 {
          background-color: green;
        }

        .Box4 {
          background-color: yellow;
        }
      </style>

      <div class="Box Box1"></div>
      <div class="Box Box2"></div>
      <div class="Box Box3"></div>
      <div class="Box Box4"></div>
    

上面的代码包含两部分：

1. 使用CSS设置了4个类名为Box的div元素的样式，每个盒子的宽度和高度都是100px，使用inline-block属性让它们放在一行，同时设置了margin和border属性以美化外观。

2. 在HTML中，我们可以为每个盒子添加类名，然后使用CSS中定义的样式来设置盒子的背景色。例如，class="Box Box1"表示这是一个类名为Box和Box1的div元素，同时使用了Box和Box1两个类名的样式。