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

边框宽度= 10像素

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

内容宽度10 - 10 =0

指定宽度=0像素

边框宽度= 10像素

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

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

但

由于内容的宽度和高度不能为负(CSS21，第10.2节)，因此此计算的值为0。

指定宽度=0像素

边框宽度= 10像素

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

内容宽度0- 10 =0(不删除边框使用的10像素)

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

Answer 2

看一下这个屏幕截图：

​

​

如你所料，整个框都是右边框，但实际宽度是90px + 10px 100x100px。因此，当您将宽度设置为0时，宽度仍为0(宽度不能为负)，但仍有10px的边框。