让A.B.C让个盒子从上到下紧贴

可以使用flex布局或者grid布局来实现让A、B、C三个盒子从上到下紧贴。

使用flex布局的示例代码如下：

HTML：

<div class="container">
  <div class="box a"></div>
  <div class="box b"></div>
  <div class="box c"></div>
</div>

CSS：

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.box {
  height: 100px;
}

.a {
  background-color: red;
}

.b {
  background-color: yellow;
}

.c {
  background-color: blue;
}

使用grid布局的示例代码如下：

HTML：

<div class="container">
  <div class="box a"></div>
  <div class="box b"></div>
  <div class="box c"></div>
</div>

CSS：

.container {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  height: 100%;
}

.box {
  height: 100px;
}

.a {
  background-color: red;
}

.b {
  background-color: yellow;
}

.c {
  background-color: blue;
}

以上两种布局方式都可以实现让A、B、C三个盒子从上到下紧贴。flex布局使用了flex-direction属性来设置主轴方向为垂直方向，justify-content属性设置为space-between来让盒子均匀分布在垂直方向上。grid布局使用了grid-template-rows属性来设置三个行的高度均为1fr（等分剩余空间）。