css怎么使两点div上下合并

CSS是网页设计中非常重要的一部分，可以使网页的布局、颜色、字体等方面得到实现。本篇文章将介绍如何使用CSS使两个Div上下合并。

// HTML代码
<div class="Box"> 
  <div class="top"></div> 
  <div class="bottom"></div> 
</div>

//css代码
.Box { 
  position: relative; 
  width: 200px;
} 
.top { 
  background-color: #ff0000; 
  height: 50px; 
  width: 100%; 
} 
.bottom { 
  position: absolute; 
  background-color: #00ff00; 
  top: 50px; 
  height: 50px; 
  width: 100%; 
}

首先，我们在HTML中定义了一个名为“Box”的DIV，里面包含了两个DIV：“top”和“bottom”，它们将会合并为一个整体。然后，我们在CSS中定义了一个“Box”类，设定它的位置（relative）和宽度，这是使两个Div上下合并的基础。接着，我们为“top”DIV设定了背景颜色、高度和宽度，这里我们的高度是50px，宽度是100%。再来，我们为“bottom”DIV设定了相对位置（absolute），接着设置了背景颜色、上边距“top”（50px）和高度、宽度，同样设置宽度为100%。

这样，我们就成功将两个Div上下合并了起来。通过设置bottom的absolute相对位移，便可轻松实现bottom自动定位的效果。希望本篇文章可以帮到正在学习CSS的朋友们，让他们能够更轻松地掌握CSS的使用技巧。