好吧问答库 > 介绍一下标准的css的盒子模型？与低版本ie的盒子模型有什么不同的

介绍一下标准的css的盒子模型？与低版本ie的盒子模型有什么不同的

2025年03月22日 11:52

有2个网友回答

网友（1）：

标准的css盒子模型：他的宽度=内容的宽度+边框的宽度+加上内边具的宽度
比如：.box{width:100px;border:10px solid #ccc;padding:10px}
那么标准的css盒子模型中的box这个的总的宽度就是140px=100+10+10+10+10；
但是低版本ie的盒子模型box的宽度还是100px，

网友（2）：

html文件中声明问xhtml或html5的：
box宽(or高) = 宽(or高) + 内边距 + 边框
.box1{
width:100px;
padding-right: 10px;
border: 2px red solid;

}
.box1宽度为：100+10+2=112px

没有上面声明则宽度为width设置的100px，内边距和边框会被压到100px里面去计算：

.box2{
width:100px;
padding-right: 10px;
border: 2px red solid;

}