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

我有一个简单的布局,包括盒子.

.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;.我需要为每个盒子分配单独的参数.是不是有一个更简单的方法,但我想只使用一个类.

实际上很容易做到.如果你不想进入绝对位置路线,你可以采取两种方式：如果你不介意 compatibility compromise或者使用box-sizing：border-box,用一个box-shadow代替增加的边框. box-sizing的唯一问题：border-box是向内移动内容(样式规则计算width属性中的总宽度填充边框宽度.如果将5px边框设置为100px框,则宽度通常为110px包括左右边框.使用box-sizing属性,它计算宽度的边框宽度,使其宽度为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>

但是,如果您不想要这些方法,那么仍然存在这样的立场：绝对解决方案.对于此方法,您不需要其他类或类似的类.您可以使用伪元素.这可能是你所需要的,但它仍然是一种选择.

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