Question

<html>
  <div class="grid">
    <div></div>
    <div></div>
    <div></div>
    .
    .
    .
    (900th div)
    <div></div>
  </div>
</html>


.grid{
  width: 600px;
  height: 600px;
  background-color: black;
  display: flex;
  flex-wrap: wrap;

}
.grid div{
  width: 20px;
  height: 20px;
  background-color: blue;
  border-style: solid;
}

我在一列中看到的是23个正方形，而不是30个。我认为所有900个正方形都应该适合网格类，但是它们正在溢出。为什么单列中有23个正方形，哪里缺少140px（600-23 * 20）？

谢谢！

Answer 1

您的div有边框。使用默认的框大小模型，边框不包含在宽度中，因此每个div实际上都大于20px。将border box model设置为div CSS：

.grid div{
  /* ... */
  box-sizing: border-box;
}

或者确保您不会忘记边界；例如：

.grid div {
  width: 16px;
  height: 16px;
  background-color: blue;
  border-style: solid;
  border-width: 2px;
}

（2 + 16 + 2 = 20）

Answer 2

由于边界！在我的浏览器中，每个像素都有3.333像素。如果需要（几乎总是），请使用box-sizing: border-box，但即使这样，仍然会丢失一些像素... 而且您想单独使用它们-空间也很重要。
实际上，您的900 flex平方可能会试图放入较小的盒子中；在第一个太小的窗口中没有乞求；
这就是flex泄漏如此丑陋的原因-无论如何它都会尝试

为什么内部div的宽度和高度不等于外部div？

2 个答案: