margin负值的应用

边框重叠

两个盒子的边框叠加，使得边框变粗，使用margin负值可解决

ul li {
  float: left;
  list-style: none;
  width: 150px;
  height: 200px;
  border: 1px solid red;
  margin-left: -1px;
}

hover缺失

使用上面的margin负值后，鼠标经过的边框变化，会有缺失。

1. 相对定位
   如果盒子没有定位，则鼠标经过添加相对定位即可

ul li:hover {
  position: relative;
  border: 1px solid blue;
}

2. 提高层级
   将li添加相对定位

ul li {
  position: relative;
  ...
}

接着，鼠标经过li时，提高层级

ul li:hover {
  z-index: 1;
  border: 1px solid blue;
 }