css的负边距

在CSS中，我们经常需要进行位置定位或者布局，其中涉及到边距的问题。一般情况下，我们使用的是正边距，即从元素的边缘到周围元素的距离。可是有时候，我们需要元素表现的和正常情况不一样，这时候就需要使用负边距了。

负边距是相对于元素自身的边缘来计算的，可以将一个元素的位置向外延伸，也可以将一个元素撤销指定的边距。下面来看一下具体的应用实例。

<div class="container">
  
  <div class="box"></div>
  </div>
  .container {
  
  position: relative;
  
  width: 200px;
  
  height: 200px;
  
  background-color: yellow;
}
  .box {
  
  position: absolute;
  
  width: 100px;
  
  height: 100px;
  
  background-color: blue;
  
  left: 50%;
  
  top: 50%;
  
  margin-left: -50px;
  
  margin-top: -50px;
}
 

在上面的代码中，我们创建了一个容器和一个盒子。通过设置容器的样式，使其为一个正方形并填充黄色背景。然后我们将盒子的位置采用绝对定位，并且将其left和top值都设置为50%。这样，盒子就会出现在容器的中心位置了。

然而，这时候盒子只是水平和垂直居中了，并没有覆盖到容器的中心。接下来，就需要使用负边距来进行调整了。通过设置盒子的margin-left和margin-top属性为元素宽度和高度的一半的负值，就可以将盒子完全覆盖容器的中心了。

总之，负边距在定位、对齐、布局等各个方面都具有广泛的应用。在使用时，需格外注意其误差和兼容性问题。