[分享]css两种盒子模型的不同

CSS盒子模型是CSS的重要概念之一，它定义了网页中所有HTML元素的大小和位置。CSS盒子模型分为两种，分别为标准盒子模型和IE盒子模型。两者的区别较为明显，下面详细介绍： 1.标准盒子模型 标准盒...

CSS盒子模型是CSS的重要概念之一，它定义了网页中所有HTML元素的大小和位置。CSS盒子模型分为两种，分别为标准盒子模型和IE盒子模型。两者的区别较为明显，下面详细介绍：
1.标准盒子模型 标准盒子模型是CSS的默认盒子模型，也是W3C推荐的标准盒子模型。它包括四个部分：元素的内容(content)、内边距(padding)、边框(border)、外边距(margin)。
下面是标准盒子模型的CSS代码：

p{
  width:200px;
  height:100px;
  padding:20px;
  border:1px solid #000;
  margin:10px;
} 

在上面的例子中，p元素的实际宽度为200px+20px+2px+10px+10px=242px，实际高度为100px+20px+2px+10px+10px=142px。其中，20px是内边距，1px是边框，10px是外边距。
2.IE盒子模型 IE盒子模型是IE浏览器特有的盒子模型，它的计算方式与标准盒子模型不同，它的宽度包括了元素的边框和内边距，而不仅仅是内容宽度。
下面是IE盒子模型的CSS代码：

p{
  width:200px;
  height:100px;
  padding:20px;
  border:1px solid #000;
  margin:10px;
  box-sizing:border-box;
} 

在上面的例子中，box-sizing属性被设置为border-box，表示将边框和内边距计算在内，因此p元素的实际宽度为200px，实际高度为100px。如果没有设置box-sizing属性，那么实际宽度为206px，实际高度为126px，其中6px是边框和内边距。
综上所述，标准盒子模型和IE盒子模型的区别主要是计算盒子宽度的方式不同，标准盒子模型只包括元素的内容宽度，而IE盒子模型包括元素的边框和内边距宽度。在开发网页时，需根据需求来选择适合的盒子模型。