box-sizing: border-box 与width:0 结合时的问题

Question

当我在学习box-sizing:border-box的时候，在MDN文档里看到这么一段话

在CSS中，你设置一个元素的 width 与 height 只会应用到这个元素的内容区。如果这个元素有任何的 border 或 padding ，绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。

box-sizing 属性可以被用来调整这些表现:

• content-box 是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
• border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding，内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高。

当我使用下列测试代码时

.test{
        height: 100px;
        width: 100px;
        box-sizing: border-box;
        border: 25px red solid;
    }

它表现的符合 width(内容区实际宽度) = width(设置的宽度，这里是100) - border -padding

当设置为

.test{
        height: 50px;
        width: 50px;
        box-sizing: border-box;
        border: 25px red solid;
    }
    
 

也还是合乎width(内容区实际宽度) = width(设置的宽度，这里是50) - border -padding

当设置为

.test{
        height: 0px;
        width: 0px;
        box-sizing: border-box;
        border: 25px red solid;
    }
    
    

为什么盒子还是会有border的宽度，请教下各位

Answer 1

请注意，设置了border-box的属性值后，表现的宽度 = width + padding + border-width

Answer 2

小于 0 取 0

https://www.w3.org/TR/css-ui-...

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. As the content width and height cannot be negative ([CSS21], section 10.2), this computation is floored at 0. 

Answer 3

当元素的 box-sizing 是 border-box 的时候，我们给元素设置的宽度、高度实际上是设置这个元素边框盒的宽度、高度。也就是说内边距、边框都是在这个内部绘制，而不会把元素撑开。也就是说盒子的宽度和高度实际上等于 内边距 + 边框 + 加内容宽度和高度。由于内容宽度不能为负数，最小为0，所以才有如上现象。

Answer 4

自己回答一下，看了上面的答案明白了
设置了box-sizing:border-box

我们给元素设置的宽度、高度实际上是设置这个元素边框盒的宽度、高度。

即内容区域的width = 设置的width - border - padding.
而内容区域的width小于0会取0
实际看到的区块width = 内容区域的with + border +padding