CSS中可以使用flex布局或者grid布局來(lái)實(shí)現(xiàn)將盒子分成上下兩部分。

1、flex布局：

通過(guò)給父盒子添加display: flex;屬性，可以使其子元素（即盒子）按照f(shuō)lex布局排列，可以通過(guò)給子元素添加flex: 1;屬性，使其充滿整個(gè)父盒子的寬度，從而實(shí)現(xiàn)將盒子分成上下兩部分的效果。

.parent {
  display: flex;
}
.child {
  flex: 1;
}

2、grid布局：

grid布局也可以實(shí)現(xiàn)將盒子分成上下兩部分的效果，通過(guò)給父盒子添加display: grid;屬性，可以使其子元素按照grid布局排列，可以通過(guò)給子元素添加grid-row: 1 / 2;屬性，使其占據(jù)第1行到第2行之間的空間，從而實(shí)現(xiàn)將盒子分成上下兩部分的效果。

.parent {
  display: grid;
}
.child {
  grid-row: 1 / 2;
}

兩種方法都可以實(shí)現(xiàn)將盒子分成上下兩部分的效果，具體使用哪種方法可以根據(jù)實(shí)際需求進(jìn)行選擇。