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

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

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

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

这里写图片描述

本人在此用了5个盒子做示范,五个盒子浮动的时候会并在一起,导致相邻部分变为2像素。如下图所示:
这里写图片描述

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

  • margin-left:-1;(按需要往左往右多少像素)解决了2像素问题
  • 若hover时会将遮盖的问题显露出来,此时提高层级就可以,由于定位的层级比浮动高,所以用定位,因为不想脱离标准流,所以用了相对定位。

    如上图代码部分,改进后的截图如下:
    这里写图片描述

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

猜你喜欢

转载自blog.csdn.net/qq_36647038/article/details/81209428