[分享]css两个div上下分隔

CSS是一种用于网页样式设计的语言，它可以将网页中的不同元素进行布局、样式和美化。其中，两个div上下分隔是很常见的一种页面布局方式。首先，我们需要在HTML中定义两个div，一个是上半部分，一个是下...

CSS是一种用于网页样式设计的语言，它可以将网页中的不同元素进行布局、样式和美化。其中，两个div上下分隔是很常见的一种页面布局方式。

首先，我们需要在HTML中定义两个div，一个是上半部分，一个是下半部分。如下所示：

<div class="top">
   上半部分
</div>

<div class="bottom">
   下半部分
</div> 

接着，我们需要利用CSS中的position属性进行上下分隔的布局。我们可以设置上半部分的高度为50%，然后利用定位将下半部分定位到上半部分之下。如下所示：

.top {
  height: 50%;
}

.bottom {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
} 

通过以上的CSS代码，我们可以实现两个div上下分隔的效果。其中，top的高度为50%，即占据了整个页面的上半部分，而bottom则利用position属性设置在top的下方，同时设置了左右底部的位置，使它占据整个页面的下半部分。

需要注意的是，如果页面中还有其他的元素需要进行布局，则需要利用position属性进行定位。同时，也要注意上下两部分的高度设置，以便让页面布局更加美观和合理。