css - 增加边框宽度时如何防止相邻元素移动？

Question

我有一个由框组成的简单布局。

 .action_box {
   width: 300px;
   height: 200px;
   border: 1px solid black;
   float: left;
   margin-left: 10px;
   margin-top: 10px;
 }
 .action_box p {
   border: 1px solid black;
   margin-top: 0px;
   text-align: center;
 }
 .action_box:hover {
   border: 2px solid black;
   cursor: pointer;
 }

<div class="action_box">asdasds</div>
<div class="action_box">asdasds</div>
<div class="action_box">asdasds</div>
<div class="action_box">asdasds</div>
<div class="action_box">asdasds</div>

当悬停在一个框附近时，我希望它的边框更宽。实际上它有效，但所有其他盒子都在移动并破坏网站。我怎样才能防止这种行为？添加填充并不能实现此目标。

我读了this发布，唯一可能的解决方案是使用 position: absolute;。我需要为每个框分配单独的参数。有没有更简单的方法，但我只想使用一个类。

Answer 1

实际上很容易做到。如果你不想走绝对位置路线，你可以通过两种方式做到这一点:如果你不介意 compatibility compromise ，则用框阴影替换增加的边框。或者使用 box-sizing:border-box。 box-sizing:border-box 的唯一问题是它会将您的内容向内移动(样式规则计算 width 属性中的总宽度 + padding + border-width . 如果你给一个 100px 的盒子设置一个 5px 的边框，宽度通常是 110px 包括左右边框。使用 box-sizing 属性，它计算边框宽度到 width 将其设置为 90px 宽，而不是允许 10px 的边框宽度)。

j08691 在他的回答中已经有了盒子大小的解决方案，所以这里是盒子阴影方法(注意我只添加了 1px 的盒子阴影。这是因为边框仍然存在，提供了所需宽度的一半):

 .action_box {
   width: 300px;
   height: 200px;
   border: 1px solid black;
   float: left;
   margin-left: 10px;
   margin-top: 10px;
 }
 .action_box p {
   border: 1px solid black;
   margin-top: 0px;
   text-align: center;
 }
 .action_box:hover {
   box-shadow: 0 0 0 1px black;
   cursor: pointer;
 }

<div class="action_box">asdasds</div>
<div class="action_box">asdasds</div>
<div class="action_box">asdasds</div>
<div class="action_box">asdasds</div>
<div class="action_box">asdasds</div>

但是，如果您不想要这两种方法，position:absolute 解决方案仍然存在。对于此方法，您不需要其他类或类似的东西。您可以改用伪元素。这对于您的需要来说可能有些矫枉过正，但它仍然是一种选择。

 .action_box {
   width: 300px;
   height: 200px;
   border: 1px solid black;
   float: left;
   margin-left: 10px;
   margin-top: 10px;
   position: relative; /* give it some context */
 }
 .action_box p {
   border: 1px solid black;
   margin-top: 0px;
   text-align: center;
 }
 .action_box:hover:after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   border: 2px solid black;
   cursor: pointer;
 }

<div class="action_box">asdasds</div>
<div class="action_box">asdasds</div>
<div class="action_box">asdasds</div>
<div class="action_box">asdasds</div>
<div class="action_box">asdasds</div>