当前位置:网站首页>box-sizing

box-sizing

2022-06-24 13:02:00 snotJam

文章目录

box-sizing

box-sizing的默认值是content-box
表示这个元素所要渲染的区域是:
自己本身的宽高+padding的距离+margin的距离

如果设置值为:border-box
表示这个元素所要渲染的区域是指定的宽高,
设置的padding和margin都会在设置的宽高的范围内设置

在这里插入图片描述
在这里插入图片描述
如果我们使用了border-box,child宽度使用100%,会对宽度进行压缩
如果我们使用了border-box,child宽度使用100px,则不会进行压缩,就是把组件渲染完之后,没有剩余空间来绘制padding了

原网站

版权声明
本文为[snotJam]所创,转载请带上原文链接,感谢
https://blog.csdn.net/u010513497/article/details/125385625