Question

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

如果你只是添加一个1px的边框，它会增加2px的宽度（并排），并且 - 有时会 - 打破当前的布局。

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

谢谢！

Answer 1

您可以更好地使用大纲属性而不是边框，因为

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

＆＃13;

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

＆＃13;

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

＆＃13;

Fiddle Here

Answer 2

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

这将为你的布局内的所有div添加一个边框。

*表示全球。

Answer 3

您应该使用box-sizing属性

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

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

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

3 个答案: