html - 有没有办法用 css 为所有 div 添加重叠边框？

Question

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

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

我需要这个只是为了控制目的，打开/关闭的东西，而不是为了生产。

谢谢!

Answer 1

你最好使用outline属性而不是border，因为

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

.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