关于border-box的问题

Question

今天看了一篇文章关于box-sizing:border-box属性，按照文章的说法，给div一个固定宽高，设置border-box，div的实际content是固定宽高减去padding和border值，也就是说无论padding和border怎么改变最外层的宽高是不变的，我自己做了demo设置了样式

          *{
                margin:0;
                padding:0;
            }
            .box{
                width:100px;
                height:100px;
                background:yellowgreen;
                padding:50px;
                border:5px solid #ccc;
            }
            .bbox{
                box-sizing:border-box
            }

在实际测量的时候发现box宽高是110px而不是100px,也就是说并没有border包含在内，求大佬给个正确的解释

Answer 1

这是个特殊情况：

你的padding 是50，边框是10； 也就是说你的最小宽度 是 110;

所以你看文档时候不够仔细：

当你的 最小宽度大于 你设置的宽度的时候，容器会使用 最小宽度

Answer 2

.box{
    width:100px;
    height:100px;
    background:yellowgreen;
    padding:50px;
    border:5px solid #ccc;
    box-sizing:border-box;
}

box-sizing: border-box;就写在.box里啊，bbox是什么。。