html同时设置多个div

当网页布局需要多个矩形区块时，我们可以使用div标签来划分页面。在HTML中，可以同时设置多个div，以便更好地控制页面布局。下面介绍如何实现同时设置多个div的方法：

<div class="container">
  <div class="Box1">
    <p>这是第一个矩形区块</p>
  </div>
  <div class="Box2">
    <p>这是第二个矩形区块</p>
  </div>
  <div class="Box3">
    <p>这是第三个矩形区块</p>
  </div>
</div>

以上代码中，我们创建了一个名为container的div容器，它包含了三个子div，每个子div都有一个class名，分别为Box1、Box2、Box3。这样我们就可以针对不同的矩形区块进行样式设计。

例如，我们可以通过以下代码样式化Box1：

.Box1 {
  width: 100px;
  height: 100px;
  background-color: red;
}

通过这样的样式，Box1就会显示为一个红色的100*100像素的矩形区块。

需要注意的是，在设置div样式时，我们通常使用CSS中的Box-sizing属性，以确保容器的大小与内部元素的大小一致。例如：

.container {
  Box-sizing: border-Box;
  width: 900px;
  padding: 10px;
  border: 1px solid black;
}

通过以上的样式，我们设置了container的边框、内边距、大小以及Box-sizing属性，使得整个布局更加美观，同时也更加易于维护。

综上所述，利用HTML的div标签以及CSS样式编写网页布局时，可以同时设置多个div，以更好地控制页面布局。同时，使用Box-sizing属性来设置div大小与内部元素大小一致，有助于优化布局效果。