CSS的width/height 属性“真的”是指内容区的宽高？

Question

width 属性指定了元素内容区的宽度. 内容区在元素padding，border和margin里面。

上面的话摘自MDN

 #test{
        position:absolute;
        top:500px;
        left:300px;
        background:black;
        width:50px;
        height:50px;
        border:10px solid red;
    }

（Chrome）
我写的宽高是50px,然后边框设置10px。但是内容区宽高只有30px。
怎么回事，和概念相悖了。

Answer 1

box-sizing有两个值可以设置。
为content-box时，不包括padding和border。
为border-boxx的时候，包括padding和border