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

Question

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

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

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

我的问题是这是否是预期的行为。似乎与我不一致。我想让一个盒子消失，只能操纵宽度/高度。感谢您的任何意见。

Answer 1

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

  

通过减去边框来计算内容宽度和高度   和指定'宽度'的相应边的填充宽度   和'身高'属性。

指定宽度= 10像素
边框宽度= 10像素
内容宽度=指定宽度（10像素） - 边框宽度（10像素）
内容宽度10 - 10 = 0

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

但是

  

由于内容宽度和高度不能为负（[CSS21]，部分   10.2），这个计算是0。

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

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

Answer 2

看一下这个截图：

如您所料，整个方框为100x100px，但实际宽度为90px + 10px右边框。因此，当您将宽度设置为0时，宽度仍为0（不能具有负宽度），但您仍然具有10px边框。