css盒子模型重叠

CSS盒子模型是指网页中每个元素被看作是一个盒子，而这个盒子由外边距（margin）、边框（border）、内边距（padding）和内容（content）组成。

而当盒子之间重叠时，这些属性会对页面的显示和元素之间的关系产生影响。

.box1{
  
  width:100px;
  
  height:100px;
  
  background-color:red;
  
  margin-left:50px;
  
  margin-top:50px;
}
.box2{
  
  width:100px;
  
  height:100px;
  
  background-color:green;
  
  margin-left:50px;
  
  margin-top:50px;
}
 

上述代码表示两个方块，分别为红色和绿色，它们的外边距都为50px，因此会发生重叠。

而在盒子重叠时，其内边距和边框会是叠在一起的，而内容是会被勾勒出来的。

因此，当我们需要实现一些较为复杂的页面布局时，需要注意盒子的重叠和各个属性的设置，尤其是外边距，以达到我们想要的效果。