box-sizing: border-box 與width:0 結(jié)合時(shí)的問(wèn)題

當(dāng)我在學(xué)習(xí)box-sizing:border-box的時(shí)候，在MDN文檔里看到這么一段話(huà)

在CSS中，你設(shè)置一個(gè)元素的 width 與 height 只會(huì)應(yīng)用到這個(gè)元素的內(nèi)容區(qū)。如果這個(gè)元素有任何的 border 或 padding ，繪制到屏幕上時(shí)的盒子寬度和高度會(huì)加上設(shè)置的邊框和內(nèi)邊距值。

box-sizing 屬性可以被用來(lái)調(diào)整這些表現(xiàn):

• content-box 是默認(rèn)值。如果你設(shè)置一個(gè)元素的寬為100px，那么這個(gè)元素的內(nèi)容區(qū)會(huì)有100px寬，并且任何邊框和內(nèi)邊距的寬度都會(huì)被增加到最后繪制出來(lái)的元素寬度中。
• border-box 告訴瀏覽器去理解你設(shè)置的邊框和內(nèi)邊距的值是包含在width內(nèi)的。也就是說(shuō)，如果你將一個(gè)元素的width設(shè)為100px,那么這100px會(huì)包含其它的border和padding，內(nèi)容區(qū)的實(shí)際寬度會(huì)是width減去border + padding的計(jì)算值。大多數(shù)情況下這使得我們更容易的去設(shè)定一個(gè)元素的寬高。

當(dāng)我使用下列測(cè)試代碼時(shí)

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

它表現(xiàn)的符合 width(內(nèi)容區(qū)實(shí)際寬度) = width(設(shè)置的寬度，這里是100) - border -padding

當(dāng)設(shè)置為

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

也還是合乎width(內(nèi)容區(qū)實(shí)際寬度) = width(設(shè)置的寬度，這里是50) - border -padding

當(dāng)設(shè)置為

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

為什么盒子還是會(huì)有border的寬度，請(qǐng)教下各位