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

html-css013

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

标准的css盒子模型：他的宽度=内容的宽度+边框的宽度+加上内边具的宽度

比如：.box{width:100pxborder:10px solid #cccpadding:10px}

那么标准的css盒子模型中的box这个的总的宽度就是140px=100+10+10+10+10；

但是低版本ie的盒子模型box的宽度还是100px，

转自 菜鸟教程

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括： 边距（外边距） ， 边框 ， 填充（内边距） ，和 实际内容 。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model)：

转自 链接

盒子模型有两种，分别是W3C盒子模型(标准盒模型)和IE盒子模型(怪异盒模型)

1.标准盒模型中width指的是内容区域content的宽度；height指的是内容区域content的高度。

2.标准盒模型下盒子的大小 = content + border + padding + margin

1.怪异盒模型中的width指的是内容、边框、内边距总的宽度（content + border + padding）；height指的是内容、边框、内边距总的高度

2.怪异盒模型下盒子的大小=width（content + border + padding） + margin

建议不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。

即box-sizing属性可以指定盒子模型种类，content-box指定盒子模型为W3C（标准盒模型），border-box为IE盒子模型（怪异盒模型）。

总宽度 = 宽度（width:内容区宽度）+ pdding + border

css3新增box-sizing属性。当box-sizing设置为border-box时，

总宽度 = 宽度（width）= 内容区宽度 + padding + border 。

box-sizing默认取值：centent-box，盒标准与CSS2中的一致。