19

[编辑：澄清 box-sizing:border-box 似乎不适用，因为我使用的是绝对定位]

以下代码说明了我的问题。我正在使用绝对定位，因为我发现这对于基于流的布局更加棘手，但我愿意接受建议。我想要的是任意元素周围的边界，而边界不影响节点的定位。（边框可能会被内容剪裁或覆盖，但这并不重要。）

特别是，父项的边界必须能够与其子项的边界重叠，这不是默认行为。CSS box-sizing 属性可以设置为border-box 来实现我想要的效果，但只能（我相信）使用内联元素。它对具有绝对定位的元素没有影响（据我所知）。

因此，我的方法是使用负边距将子项的位置偏移边框的宽度。这似乎确实抵消了边界存在的影响，但不幸的是，在比例因子上并不是一致的。在大尺度上，事情看起来还不错。在 Chrome 的默认浏览器缩放中，元素定位有点偏离（它们看起来太高了）；如果我变小，则元素位置会朝另一个方向移动。

但如果我完全删除边框，布局似乎可以缩放。

所以我的问题是：是否有一种可靠（可扩展）的方式在 HTML 元素上设置边框而不影响元素的定位？

[在示例中，我为某些边框使用了不同的颜色。我只想看到黑色，但在某些缩放中我可以看到红色和绿色边框，表明元素的位置受到边框存在的影响。]

谢谢 Roly .bordered { 位置：绝对；高度：18px；边框：2px 实心；边距：-2px；} 

<span class="bordered" style="width: 55px; left: 30px;">
  <span class="bordered" style="width: 8px; left: 0;">
    (
  </span>
  <span class="bordered" style="border-color: green; width: 47px; left: 8px;">
    <span class="bordered" style="border-color: red; width: 39px; left: 0;">
      <span class="bordered" style="width: 8px; left: 0;">
        5
      </span>
      <span class="bordered" style="width: 31px; left: 8px;">
        <span class="bordered" style="width: 23px; left: 8px;">
          Nil
        </span>
      </span>
    </span>
    <span class="bordered" style="width: 8px; left: 39px;">
      )
    </span>
   </span>
 </span>
4

3 回答 3

26

试用 CSS2outline属性：

.bordered {
    outline:2px solid blue;
}

轮廓不影响元素位置。

您还可以使用 CSS3 outline-offset，如下所示：http ://www.css3.info/preview/outline/

于 2013-02-05T12:10:12.870 回答
11

我还发现使用宽度为零的边框（这样它不会影响布局），然后添加一个盒子阴影来模拟可见边框，似乎效果很好。

于 2013-02-05T13:00:58.500 回答
2

六年后...

其他答案对我的情况不起作用，因为我正在设计的盒子已经有一个盒子阴影。我只需要在一侧有一个边框，比如border-left和 a border-radius，但没有边框影响元素的位置或宽度。我想出的解决方案是在绝对定位元素的内部元素上应用边框。

.outer {
  position: absolute;
  width: 200px;
  height: 100px;
  border-radius: 5px;
  background-color: #c8c8c8;
}

.inner {
    height: 100%;
    min-height: 100%;
    min-width: 100%;
    width: 100%;
    border-left: solid 5px #097fee;
    border-radius: 5px;
}
<div class="outer">
  <div class="inner">
    Some content
  </div>
</div>

于 2019-04-05T18:04:03.270 回答