html - CSS 边框问题

Question

我正在阅读 W3 学校的 box-sizing 属性，并尝试使用 THIS EXAMPLE 更改 div 的 box-sizing 属性。 .

当我点击尝试按钮时，它按预期工作，在 300 像素宽度的容器中安装了 2 个宽度为 150 像素的框。但是当我将容器的 box-sizing 属性更改为 border-box 时，这两个框不适合放在容器内。

为什么即使盒子宽度增加到 300px(容器宽度)也会发生这种情况？

Answer 1

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

如果你不对外部容器应用box-sizing: border-box，那么它的边框不计入300px。所以内部区域是 300px 并且适合两个内框。

当你在外层容器中添加 box-sizing: border-box 时，它的宽度、padding 和 border 加起来是 300px，所以它的内部区域只有 298px(因为每个容器上的 1px 边框)边)，所以里面的两个盒子放不下了。