有没有一种方法可以使用CSS为所有div添加重叠的边框？

Question

我在这里进行了搜索，但只找到了有关相邻边框的信息。是否有人知道是否可以向所有div添加边框，以便查看当前布局如何工作。

如果您只添加1像素的边框，它将在宽度上增加2像素（并排），有时会破坏当前布局。

我只需要这个来控制，打开/关闭一些东西，不是为了生产。

谢谢！

- distante

---

可能是重复的问题：https://dev59.com/Cmkw5IYBdhLWcg3w2-TG - sheavens

Answer 1

您可以更好地使用 轮廓线（outline） 属性而不是边框，因为:

• 轮廓线不占用空间，因为它们总是放置在元素的框上方，这可能会导致它们与页面上的其他元素重叠。
• 与边框不同，轮廓线不允许我们将每个边缘设置为不同的宽度，或为每个边缘设置不同的颜色和样式。
• 轮廓线在四个方向上都相同。
• 轮廓线除了重叠之外，不会对周围元素产生任何影响。
• 与边框不同，轮廓线不会改变元素的大小或位置。

.outline-outer,.border-outer{
  height:100px;
  width:100px;
  border:solid 1px blue;
}
.border{
  height:80px;
  width:50px;
  border:solid 1px red;
  float:left;
}
.outline{
   height:80px;
  width:50px;
  outline:solid 1px red;
  float:left;
}

<div class="outline-outer">
  <div class="outline"></div>
  <div class="outline"></div>Outlined
</div>
<br/><br/><br/>
<div class="border-outer">
  <div class="border"></div>
  <div class="border"></div>Bordered
</div>

这里是Fiddle示例

- Suresh PMS

Answer 2

    * {
    border:1px solid red;
    box-sizing: border-box;
    }

这将为布局内所有 div 元素添加边框。 * 表示全局。

- kevin seda

Answer 3

你应该使用 box-sizing 属性。

该属性指定了元素的宽度和高度包括了元素的内边距和边框，对布局没有影响。

* {
border: 1px solid blue;
box-sizing: border-box;
} 

- M.Tanzil