有没有办法用 css 为 ALL div 添加重叠边框？

Question

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

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

我需要这个只是为了控制目的，一些要转向的东西 on/off，而不是为了生产。

谢谢！

Answer 1

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

这将为您的布局内的所有 div 添加边框。

*表示全局。

Answer 2

你最好用outline属性代替border，因为

大纲不占用 space，因为它们总是放在可能导致它们与其他元素重叠的元素框在页面上。
与边框不同，轮廓不允许我们将每条边设置为不同的宽度，或者为每条边设置不同的颜色和样式。
轮廓四面都一样
轮廓对周围的元素没有任何影响，除了重叠。
与边框不同，轮廓不会改变边框的大小或位置元素.

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

Answer 3

您应该使用 box-sizing 属性其中

指定元素，元素的总宽度和高度中应包含填充和边框。所以对布局没有影响

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

有没有办法用 css 为 ALL div 添加重叠边框？

Is there a way to add overlapping borders to ALL div with css?

html

css