为什么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 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;或visibility:hidden;,则需要将the width:XX;和the border-right:XX;设置为零.