CSS3进阶知识：CSS3盒子模型，box-sizing:content-box和box-sizing:border-box的讲解

CSS3盒子模型定义了用户代理应该如何计算一个元素的总宽度和总高度，这由box-sizing属性控制。

• content-box：这是CSS2.1的盒子模型。元素的宽度/高度由width/height属性设置。元素的边框和内边距不会被包括在内。
• border-box：元素的宽度/高度包含了元素的边框（border）和内边距（padding），不包括外边距（margin）。

例子：

/* 设置元素的盒子模型为content-box */
.content-box {
  width: 300px;
  padding: 10px;
  border: 5px solid black;
  box-sizing: content-box; /* 计算宽度和高度时，包含内容，但不包含边框和内边距 */
}
 
/* 设置元素的盒子模型为border-box */
.border-box {
  width: 300px;
  padding: 10px;
  border: 5px solid black;
  box-sizing: border-box; /* 计算宽度和高度时，包含内容、内边距和边框 */
}

在这个例子中，.content-box元素的总宽度将是300px + 10px(左右内边距) + 10px(左右边框) + 5px(左右边框) = 320px，高度类似计算。而.border-box元素的总宽度将是300px，内边距和边框都包含在这个宽度内。