介绍一下CSS的盒子模型？_

海因斯坦

盒模型的组成包括:content, padding, border, margin组成。

有两种盒模型:标准盒模型和IE盒模型。两种盒模型的主要区别是:标准盒模型的宽高是值内容宽高(content),而IE盒模型的宽高是指content+padding+border。

设置盒模型的方式是：设置box-sizing

box-sizing:content-box 标准盒模型

box-sizing:border-box IE盒模型

发表于 2018-08-15 17:20:10 回复(0)

黑皮20180923004464

标准盒模型 width=content IE盒模型 width=content+padding+border

发表于 2019-09-03 11:52:49 回复(0)

小白萌萌哒

盒子模型分为IE盒子和W3c盒子两种：

W3C盒子由margin，border，padding，content

IE盒子由margin，padding，padding，content构成，但是由于content包括padding，border，即为margin+content

发表于 2015-08-26 20:34:55 回复(0)

hahani

1）盒模型：内容(content)、填充(padding)、边界(margin)、边框(border)

2）有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和 padding;

编辑于 2016-03-30 20:36:24 回复(0)

梭梭苏苏

例如一个盒子模型如下：margin:20px,border:10px,padding:10px;width:200px;height:50px;

如果用w3c盒子模型解释，那么这个盒子模型占用的

宽度为：20*2+10*2+10*2+200=280px;

高度：20*2+10*2+20*2+50=130px;

盒子的实际宽度大小为:10*2+10*2+200=240px;

实际高度：10*2+10*2+50=90px;

用ie的盒子模型解释：盒子在网页中占据的大小为20*2+200=240px; 高：20*2+50=90px;

盒子的实际大小为：宽度:200px, 高度:50px;

我们常常理解的盒子模型是w3c这样的盒子模型

发表于 2016-07-26 14:36:53 回复(0)

vaakian

IE盒子，添加padding、border不会撑大盒子，因为它们属于高宽。

高/宽 = padding+border+content

标准盒子模型，添加padding、border会撑大盒子，它们不属于高宽。

高/宽 = content

发表于 2021-09-18 17:40:18 回复(0)

牛客469662425号

盒模型的组成包括:content, padding, border, margin组成。有两种盒模型:标准盒模型和IE盒模型。两种盒模型的主要区别是:标准盒模型的宽高是值内容宽高(content),而IE盒模型的宽高是指content+padding+border。设置盒模型的方式是：设置box-sizing box-sizing:content-box 标准盒模型 box-sizing:border-box IE盒模型

发表于 2021-05-08 09:54:30 回复(0)

呼啦婷婷

盒子模型是由content、border、padding、margin构成的。 css盒子模型分为：w3c盒子模型、IE盒子模型（怪异盒子模型） w3c盒子模型 = width(不包含border + padding) IE盒子模型 = width + border + padding （包含border + padding）在开发中通过box-sizing来设置： w3c盒子模型：box-sizing:content-box IE盒子模型：box-sizing:border-box

发表于 2021-03-29 21:47:43 回复(0)