Question

标准盒模型和IE盒模型

Answer 1

盒模型是CSS中一个十分重要的概念，掌握好它对网站的构建有十分深刻的作用。

盒子模型可分为两种，标准w3c盒模型以及IE盒模型。这篇文章就是探讨这两者以及具体应用。

html文档中的每个元素都被描绘成矩形盒子，这些矩形盒子通过一个模型来描述其占用空间，这个模型称为盒模型。

盒模型通过四个边界来描述：margin（外边距），border（边框），padding（内边距），content（内容区域）

概念： ie 盒子模型的范围包括 margin、border、padding、content，和标准 w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border 和 pading。

例如一个盒子模型如下：margin:40px,border:20px,padding:20px;width:200px;height:100px;
则用IE盒模型来解释为：
该盒子在网页中占据的大小有：
高：40x2+100=180px
宽：40x2+200=280px
盒子的实际大小为：高：100px；宽：200px；

概念：盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。

如上面的盒子模型：
margin:40px,border:20px,padding:20px;width:200px;height:100px;
则用w3c标准盒模型解释：
该盒子在网页中占用大小：
高：40x2+20x2+20x2+100=260px
宽：40x2+20x2+20x2+200=360px
盒模型实际大小：
高：20x2+20x2+100=180px
宽：20x2+20x2+200=280px