今天看了一篇文章关于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包含在内,求大佬给个正确的解释
这是个特殊情况:
你的padding 是50,边框是10; 也就是说你的最小宽度 是 110;
所以你看文档时候不够仔细:
当你的 最小宽度大于 你设置的宽度的时候,容器会使用 最小宽度