当前位置: 首页 > Web前端 > CSS

5分钟弄清楚box-sizing

时间:2023-03-30 22:33:31 CSS

box-sizing是什么。总之,box-sizing是用来控制一个元素的内容区域的width/height与padding、border的关系;普通盒模型:元素内容区域width=width;元素内容区域高度=高度;元素实际宽度=width+padding+border;元素实际高度=height+padding+border;从图中可以看出正常显示。宽度为420px(10px+50px+300px+50px+10px)。当我们在div上设置一个box-sizing:content-box时;效果和默认一致,也就是说默认的盒子模型是box-sizing:content-box;如下图所示:box-sizing:content-box当box-sizing:border-box;设置后,元素的实际宽度为300px,即实际宽度值为width的值,div内容区域的宽度为去掉padding和border后的宽度;如下如图:box-sizing:border-box;