CSS边框问题答案

【问题标题】：CSS Border-box issueCSS边框问题
【发布时间】：2014-07-15 15:23:31
【问题描述】：

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

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

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

【问题讨论】：

你缩小了容器的尺寸，所以它不会起作用，先试试合适的容器，然后是里面的盒子
这对我来说似乎工作正常。如果我使用您的 TryIt 示例，首先我会看到下面的框。然后我单击 TryIt 按钮，这些框彼此相邻，因此有足够的空间。也许它取决于浏览器版本？
我认为，他的意思是在您将 box-sizing: border-box 添加到 div.container 之前它可以正常工作。

标签： html css

【解决方案1】：

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

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

将box-sizing: border-box添加到外部容器时，它的宽度、内边距和边框加起来是300px，所以它的内部区域变成了只有298px（因为两边都是1px的边框），所以里面的两个盒子放不下更多。

【讨论】：

【解决方案2】：

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

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

300px=[ 298px + 1px(左边框) + 1px(右边框) ]

在这种情况下，您需要将container 的width 从300px 增加到302px 或者您可以将内部div's 的宽度从1px 减小每个喜欢

div.box { width: 149px; }

【讨论】：

【解决方案3】：

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

首先，您必须将 0 填充设置为您的 div.box。此外，如果您想要 padding-left 和 padding-right ，则必须从宽度中减去它。

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

现在，对于边框，您还必须从div.box 中减去边框宽度。这里的边框是 3px，所以从div.box 中减去 6px（border-left 为 3px + border-right 为 3px）。

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

div.box {
    border: 3px solid coral;
    float: left;
    padding: 10px;
    width: 124px;
}

【讨论】：