[分享]css三种盒子模型在一起

在CSS中，盒子模型是用来描述网页元素所占空间的模型。CSS盒子模型有三种：传统盒子模型（contentbox）、W3C盒子模型（borderbox）和IE盒模型（paddingbox）。.box {...

在CSS中，盒子模型是用来描述网页元素所占空间的模型。CSS盒子模型有三种：传统盒子模型（content-box）、W3C盒子模型（border-box）和IE盒模型（padding-box）。

.box {
  width: 200px;
  height: 100px;
  border: 2px solid;
  padding: 20px;
  margin: 10px;
} 

其中，width和height代表的是元素的内容区域的宽度和高度。传统盒子模型（content-box）中，宽度和高度只包括内容区域，不包括边框和内边距。如上述代码所示，如果使用传统盒子模型，则元素的实际宽度为：

200（内容宽度） + 2 * 20（边框宽度） + 2 * 2 * 10（内边距宽度） + 2 * 10（外边距宽度） = 304px 

W3C盒子模型（border-box）中，元素的宽度和高度包括了边框和内边距。如上述代码所示，如果使用W3C盒子模型，则元素的实际宽度为：

200（内容宽度） + 2 * 2（边框宽度） + 2 * 20（内边距宽度） + 2 * 10（外边距宽度） = 284px 

IE盒模型（padding-box）和W3C盒子模型类似，元素的宽度和高度包括了边框和内边距。不同的是，IE盒模型中，宽度和高度不包括边框，但包括内边距。如上述代码所示，如果使用IE盒模型，则元素的实际宽度为：

200（内容宽度） + 2 * 20（内边距宽度） + 2 * 10（外边距宽度） = 260px 

在实际开发中，选择使用哪种盒子模型，需要根据具体的需求和设计师的要求来决定，不同的盒子模型有不同的应用场景。