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

在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

我的问题是如果这是预期的行为.似乎与我不一致我想让一个框消失只能操纵宽/高.感谢任何投入.

解决方法

内容区域是减去边框宽度后剩下的内容.

The content width and height are calculated by subtracting the border
and padding widths of the respective sides from the specified ‘width’
and ‘height’ properties.

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

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

但

As the content width and height cannot be negative ([CSS21],section
10.2),this computation is floored at 0.

指定width = 0 px
边框宽度= 10像素
内容宽度=指定宽度(0像素) – 边框宽度(10像素)
内容宽度0 – 10 = 0(不会删除边框使用的10像素)

如果不想使用display：none;或可见度：隐藏;您需要设置宽度：XX;和边界右：XX;到零.

原文地址：https://www.jb51.cc/css/216371.html