css中3个盒子模型

CSS中的盒子模型是一个重要的概念，它决定了页面上元素的布局和样式。盒子模型是指每个HTML元素都被视为一个矩形的盒子，包括内容(content)、内边距(padding)、边框(border)和外边距(margin)四个部分。在CSS中，有三个不同的盒子模型可以选择使用，分别是标准盒子模型（content box）、IE盒子模型（border box）和新CSS3盒子模型（box-sizing: border-box）。

/* 标准盒子模型 */
.box {
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 1px solid #ccc;
  margin: 10px;
  /* 宽度 = 内容宽度 + 内边距宽度 + 边框宽度 */
}

/* IE盒子模型 */
.box {
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 1px solid #ccc;
  margin: 10px;
  box-sizing: border-box;
  /* 宽度 = 内容宽度 */
}

/* 新CSS3盒子模型 */
.box {
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 1px solid #ccc;
  margin: 10px;
  box-sizing: content-box;
  /* 宽度 = 内容宽度 + 边框宽度 */
} 

在标准盒子模型下，设置一个元素的宽度表现为：宽度 = 内容宽度 + 内边距宽度 + 边框宽度。而在IE盒子模型下，设置宽度只包括内容宽度，即宽度 = 内容宽度。而新CSS3盒子模型，通过使用box-sizing属性，可以指定盒子模型的计算方式，包括content-box和border-box两种。

通过不同的盒子模型，我们可以实现不同的布局效果。例如，如果我们想让一个元素的宽度保持不变，但是内容宽度和内边距宽度随着容器宽度变化而自适应，我们可以使用border-box盒子模型。如果我们想要元素的实际宽度包括内边距宽度和边框宽度，但不包括外边距宽度，我们可以使用新CSS3盒子模型。