标准盒模型和IE盒模型
发布网友
发布时间：2022-11-24 15:35
共1个回答
热心网友
时间：2023-01-29 17:42
盒子模型可分为两种，标准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
