css两个盒子怎么竖向排列

在CSS样式表中，我们经常需要使用盒子来布局页面。如何让两个盒子竖向排列呢？下面的代码可以实现这一效果：

.box1 {
  width: 100%;
  height: 200px;
  background-color: red;
}

.box2 {
  width: 100%;
  height: 300px;
  background-color: blue;
  margin-top: 20px;
} 

以上CSS代码中，我们定义了两个名称分别为box1和box2的盒子，并给它们分别设置了宽度、高度和背景颜色。为了让它们竖向排列，我们需要给box2添加一个margin-top属性，用于距离box1的距离。

我们还可以将以上代码进行优化，使其更加简洁：

.box {
  width: 100%;
  height: 200px;
}

.box1 {
  background-color: red;
}

.box2 {
  background-color: blue;
  margin-top: 20px;
} 

在上述代码中，我们使用了一个名称为box的class来定义两个盒子的公共样式。这样做的好处是，我们可以统一设置宽度和高度等属性，避免出现代码重复。

总的来说，以上是两个盒子竖向排列的基本方法，你可以根据实际需求进行调整并应用到你的CSS样式表中。