关于border-box的问题

今天看了一篇文章关于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包含在内,求大佬给个正确的解释

clipboard.png

阅读 2.1k
2 个回答

这是个特殊情况:

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

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

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题