为什么 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>

View on jsFiddle

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

Answer 1

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

内容的宽度和高度是通过减去边框来计算的 以及指定“宽度”的各个边的填充宽度 和“高度”属性。

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

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

但是

由于内容的宽高不能为负数（[CSS21]，section 10.2)，这个计算的下限为 0。

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

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

Answer 2

看看这个截图：

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