Question

我正在阅读关于W3学校的盒子大小的属性，并尝试用THIS EXAMPLE更改div的盒子大小属性。

当我点击它时按下它按钮按预期工作，在300px宽度容器内装入宽度为150px的2个盒子。但是当我将容器的盒子大小改变为边框时，这两个盒子不适合容器内部。

为什么会发生这种情况，即使箱子宽度增加到300px，即容器宽度？

Answer 1

您的外部容器也有1px边框。

如果您不将box-sizing: border-box应用于外部容器，则其边框不会计入300px。所以内部区域是300px，两个内盒适合。

当您将box-sizing: border-box添加到外部容器时，其宽度，填充和边框一起构成300px，因此其内部区域仅变为298px（因为每侧有1px边框），因此内部的两个框不会再适合。

Answer 2

您的问题是：当我将容器的box-sizing属性更改为border-box时，这两个框不适合容器内部。

Ans：当您将box-sizing: border-box;添加到container时，container's宽度变为298px因为300px已添加来自1px的2px边框，left表单1px和right。

300px = [298px + 1px（左边框）+ 1px（右边框）]

在这种情况下，您需要将width container从300px增加到302px 或您可以减少宽度来自div's的内部1px，如

div.box { width: 149px; }

Answer 3

由于border和padding而发生此问题。

首先，您必须将0填充设置为div.box。此外，如果你想要填充左边和填充右边，你必须从宽度中减去它。

这意味着您必须从padding-left宽度减去20px（10px padding-right + 10px div.box）。所以你的宽度将是130px。

现在，对于边框，您还必须从div.box中减去边框宽度。此处边框为3px，因此border-left减去6px（border-right为3px + {1}}为3px。

所以，最后你的代码看起来像，

div.box