CSS盒子模型详解

CSS盒子模型通常分为两种：标准盒子模型和IE盒子模型。

1. 标准盒子模型：内容（content）、填充（padding）、边界（margin）、边框（border）组成，其中内容（content）区域的尺寸就是元素的宽度/高度。
2. IE盒子模型：内容（content）、填充（padding）、边框（border）、边界（margin）组成，这样导致元素的宽度/高度不仅仅包含内容区域，还包含了填充和边框。

CSS3中提供了box-sizing属性，可以用来指定使用哪种盒子模型计算宽度和高度：

• box-sizing: content-box 表示使用标准盒子模型。
• box-sizing: border-box 表示使用IE盒子模型。

例如：

/* 使用标准盒子模型 */
.content-box {
  box-sizing: content-box;
  width: 100px;
  padding: 10px;
  border: 5px solid;
  margin: 10px;
}
 
/* 使用IE盒子模型 */
.border-box {
  box-sizing: border-box;
  width: 100px;
  padding: 10px;
  border: 5px solid;
  margin: 10px;
}

在HTML中：

<div class="content-box">Content Box</div>
<div class="border-box">Border Box</div>

在这个例子中，"Content Box" 的实际宽度将是100px（内容区域的宽度），而"Border Box" 的实际宽度将是150px（内容区域、填充、边框都包含在内）。