在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;到零.
