css 中 box-sizing 的 border-box、content-box 的区别

追格官方小助手/ 2023年03月11日/ CSS教程/ 浏览 1066

box-sizing 默认值为 content-box,当做如下设置:


box-sizing: content-box; 
width: 600px;
height: 600px;
margin: 10px;
padding: 10px;
border: 1px solid #000;


元素的尺寸如下:

元素的宽为:内容区+margin+padding+border,即 600+10+10+1。内容区宽度为 600,实际占据的宽度为 621。


其他属性值不变,box-sizing 改为 border-box,如下:


box-sizing: border-box; 
width: 600px;
height: 600px;
margin: 10px;
padding: 10px;
border: 1px solid #000;


元素实际占据的宽度为600,内容区的宽度为 600-margin-padding-border,即 600-20-20-1,内容区的宽度为578。


box-sizing 默认值为 content-box,width 设置的是内容区的宽度;box-sizing 默认值为 border-box,width 设置的是元素占据空间的宽度。


发表评论

暂无评论,抢个沙发...

客服 工单