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

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>

当徘徊在一个盒子上时，我希望它获得更大的边界。实际上它可以工作，但是所有其他工具箱都已移开并破坏了网站。如何防止这种行为？添加填充不能实现此目标。

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

Answer 1

实际上很容易做到。如果您不想走绝对位置路线，可以通过两种方式进行：如果您不介意兼容性妥协或使用box-sizing:border-box. 唯一的问题box-sizing:border-box是它将您的内容向内移动（样式规则计算width属性中的总宽度 + 填充 + 边框宽度。如果您将 5px 边框设置为 100px 框，则宽度通常为 110px 以包括左和右边box-sizing框。使用该属性，它将边框宽度计算为width90 像素宽，而不是允许边框宽度为 10 像素）。

j08691 在他的回答中已经有了 box-sizing 解决方案，所以这里是 box-shadow 方法（注意我只添加了 1px 的 box shadow。这是因为边框仍然存在，提供了所需宽度的一半）：

 .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>

Answer 2

一个可能的解决方案可以box-shadow使用border：

.action_box:hover {
    box-shadow: inset 0 0 0 1px black;
}

演示版

注意：使用此解决方案，内部内容也不会移动:)

Answer 3

添加box-sizing:border-box;到您的.action_box课程：

.action_box {
   width: 300px;
   height: 200px;
   border: 1px solid black;
   float: left;
   margin-left: 10px;
   margin-top: 10px;
  box-sizing:border-box;
 }
 .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>