css - 为什么 box-sizing:border-box 仍然显示宽度为 0px 的边框？

Question

在 CSS 中使用box-sizing: border-box时，我假设元素的总宽度将在其“宽度”值中定义。所以如果我说一个分割的宽度是20px，右边框是10px，我最终会得到一个占据20px空间的盒子，其中一半是右边框。将它推到我将宽度设置为 10px 和右边框的位置，就像这里一样：

#box {
  overflow: hidden;
  width: 10px;
  box-sizing: border-box;
  height: 50px;
  background: black;
  border-right: 10px solid red;
}

<div id="box"></div>

该框将仅包含红色边框。当我将宽度设置为 0px 时会发生什么？我以为它会让整个事情消失，但是不，结果和上面的完全一样：

#box-1 {
  overflow: hidden;
  width: 10px;
  box-sizing: border-box;
  height: 50px;
  margin-bottom: 10px;
  background: black;
  border-right: 10px solid red;
}

#box-2 {
  overflow: hidden;
  width: 0px;
  box-sizing: border-box;
  height: 50px;
  background: black;
  border-right: 10px solid red;
}

<div id="box-1"></div>
<div id="box-2"></div>

在 jsFiddle 上查看

我的问题是这是否是预期的行为。对我来说似乎不一致。我想让一个盒子消失，只控制宽度/高度。

Answer 1

内容区域是减去边框宽度后剩下的任何内容。

内容的宽度和高度是通过从指定的“宽度”和“高度”属性中减去相应边的边框和填充宽度来计算的。

指定宽度 = 10 px
边框宽度 = 10 px
内容宽度 = 指定宽度 (10 px) - 边框宽度 (10 px)
内容宽度 10 - 10 = 0

指定宽度 = 0 px
边框宽度 = 10 px
内容宽度 = 指定宽度 (0 px) - 边框宽度 (10 px)
内容宽度 0 - 10 = -10（这将删除边框使用的 10 px）

但

由于内容的宽度和高度不能为负数（[CSS21]，第 10.2 节），因此该计算以 0 为底。

指定宽度 = 0 px
边框宽度 = 10 px
内容宽度 = 指定宽度 (0 px) - 边框宽度 (10 px)
内容宽度 0 - 10 = 0 （不会删除边框使用的 10 px）

如果您不想使用display:none;or visibility:hidden;，则需要将 thewidth:XX;和 the都设置border-right:XX;为零。

Answer 2

看看这个截图：

整个盒子100x100px如你所料，但实际宽度是90px+10px右边框。所以当你将宽度设置为0时，宽度仍然是0（不能有负宽度），但你仍然有10px的边框。