CSS盒子上中下分開的方法

在CSS中，我們可以使用flex布局來(lái)實(shí)現(xiàn)盒子上中下的分開，我們需要?jiǎng)?chuàng)建一個(gè)包含三個(gè)子元素的容器，每個(gè)子元素代表盒子的一部分：上、中、下，我們可以使用flex布局的屬性來(lái)調(diào)整這三個(gè)子元素的位置和大小。

下面是一個(gè)示例代碼：

HTML結(jié)構(gòu)：

<div class="box">
  <div class="top"></div>
  <div class="middle"></div>
  <div class="bottom"></div>
</div>

CSS樣式：

.box {
  display: flex;
  flex-direction: vertical;
  height: 100%;
}
.top {
  height: 30%;
  background-color: #f00;
}
.middle {
  height: 40%;
  background-color: #0f0;
}
.bottom {
  height: 30%;
  background-color: #00f;
}

在這個(gè)示例中，我們創(chuàng)建了一個(gè)名為“box”的容器，該容器包含三個(gè)子元素：“top”、“middle”和“bottom”，我們使用flex布局將這三個(gè)子元素垂直排列，并分別設(shè)置它們的高度和背景顏色，這樣，我們就可以實(shí)現(xiàn)盒子上中下的分開了。