边框1像素的多个盒子并在一起相邻部分变成2像素的问题
1像素多个盒子边框并在一起变成2像素的问题
假设需要多个盒子。盒子边框的像素都为1,但是将这几个盒子并列放在一起会导致相邻的部分变为2像素,此时不想要2像素,想让边框变为1像素,该如何解决呢?
下面本人附上代码截图,并且适当说明原因。
本人在此用了5个盒子做示范,五个盒子浮动的时候会并在一起,导致相邻部分变为2像素。如下图所示:
解决此问题需要两个关键点:
- margin-left:-1;(按需要往左往右多少像素)解决了2像素问题
-
若hover时会将遮盖的问题显露出来,此时提高层级就可以,由于定位的层级比浮动高,所以用定位,因为不想脱离标准流,所以用了相对定位。
如上图代码部分,改进后的截图如下:
掌握这两个关键点,此问题就会轻松解决了,哈哈~