边框1像素的多个盒子并在一起相邻部分变成2像素的问题

1像素多个盒子边框并在一起变成2像素的问题

假设需要多个盒子。盒子边框的像素都为1，但是将这几个盒子并列放在一起会导致相邻的部分变为2像素，此时不想要2像素，想让边框变为1像素，该如何解决呢？

下面本人附上代码截图，并且适当说明原因。

本人在此用了5个盒子做示范，五个盒子浮动的时候会并在一起，导致相邻部分变为2像素。如下图所示：

解决此问题需要两个关键点：

• margin-left：-1；（按需要往左往右多少像素）解决了2像素问题

• 若hover时会将遮盖的问题显露出来，此时提高层级就可以，由于定位的层级比浮动高，所以用定位，因为不想脱离标准流，所以用了相对定位。

  如上图代码部分，改进后的截图如下：
  

  掌握这两个关键点，此问题就会轻松解决了，哈哈~