css三个框不在一排

最近我学习了css，想要制作一个包含三个框的页面。但是问题是，它们不能在同一排中，而是要垂直排列。那么该怎么做呢？

<style>
.box{
  width: 200px;
  height: 100px;
  border: 1px solid black;
  border-radius: 5px;
  margin-bottom: 20px;
}

#box1{
  background-color: red;
}
#box2{
  background-color: blue;
}
#box3{
  background-color: green;
}

</style>

<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div> 

首先，我们使用css设置每个框的样式，包括宽度、高度、边框、圆角等。然后设置每个框的背景颜色，这里我们使用红色、蓝色和绿色。最后，我们将三个框添加到页面中，它们的class都是box，但是它们的id分别是box1、box2和box3。

接下来，我们为框设置margin-bottom属性，这样它们就会在垂直方向上呈现出一定的间距。

在浏览器中查看页面，你会发现三个框已经按照你的要求排列了！