CSS布局技巧：margin负值的巧妙运用_css解决两个盒子边框-CSDN博客

本文链接：https://blog.csdn.net/panghuangang/article/details/141303639

问题

例如，5个小盒子，每个盒子的边框都是1px，那么叠加起来，两个盒子中间的边框就会变为2px，但我们期望两个盒子之间的边框看起来一致，也是1px：
在这里插入图片描述

在这里插入图片描述

解决方法：盒子加上`margin-left: -1px;`

因为盒子的边框是1px，所以此处使用margin-left: -1px;
在这里插入图片描述

在这里插入图片描述

在有一致细线边框的基础上，如果鼠标经过盒子，用不同的颜色显示边框

鼠标经过某个盒子的时候，提高当前盒子的层级即可：如果没有定位，则加相对定位（保留位置）；如果有定位，则加z-index。

如果没有定位，鼠标经过的时候，添加相对定位

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    ul li {
      float: left;
      list-style: none;
      width: 150px;
      height: 200px;
      border: 1px solid red;
      margin-left: -1px;
    }

    ul li:hover {
      /* 如果盒子没有定位，则鼠标经过添加相对定位即可 */
      position: relative;
      border: 1px solid blue;
    }
  </style>
</head>

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</body>

</html>

鼠标经过第5个盒子：
在这里插入图片描述

鼠标经过第3个盒子：
在这里插入图片描述

如果盒子都有定位，则利用z-index提高层级

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    ul li {
      position: relative;
      float: left;
      list-style: none;
      width: 150px;
      height: 200px;
      border: 1px solid red;
      margin-left: -1px;
    }

    ul li:hover {
      /* 如果li都有定位，则利用z-index提高层级 */
      z-index: 1;
      border: 1px solid blue;
    }
  </style>
</head>

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</body>

</html>