CSS盒模型是CSS中用于定义元素如何显示的一套规则，它包括元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）。盒模型主要有两种：标准盒模型（也称为W3C盒模型）和怪异盒模型（也称为IE盒模型）。这两种盒模型的主要区别在于如何处理元素的宽度和高度。
标准盒模型（W3C盒模型）
在标准盒模型中，元素的宽度（width）和高度（height）只包含内容区域的尺寸，不包括内边距（padding）和边框（border）。这意味着如果你设置一个元素的宽度为100px，那么这个元素的内容区域宽度就是100px，内边距和边框会在这个宽度之外额外增加。
- 宽度 = 内容宽度 + 左右内边距 + 左右边框
- 高度 = 内容高度 + 上下内边距 + 上下边框
css
.box {
width: 100px;
height: 100px;
padding: 10px;
border: 5px solid black;
}
在标准盒模型中，上面的元素实际占据的空间宽度为120px（100px内容 + 10px内边距 * 2 + 5px边框 * 2），高度为130px。
怪异盒模型（IE盒模型）
怪异盒模型最初是Internet Explorer浏览器特有的盒模型，它将元素的宽度和高度设置为包括内容、内边距和边框的总和。这意味着如果你设置一个元素的宽度为100px，那么这个元素的总宽度（包括内容、内边距和边框）就是100px。
- 宽度 = 内容宽度 + 左右内边距 + 左右边框（总宽度）
- 高度 = 内容高度 + 上下内边距 + 上下边框（总高度）
css
.box {
width: 100px;
height: 100px;
padding: 10px;
border: 5px solid black;
box-sizing: border-box; /* 这行代码将盒模型改为怪异盒模型 */
}
在怪异盒模型中，上面的元素实际占据的空间宽度为100px，因为宽度已经包括了内边距和边框。
如何在CSS中指定盒模型
在CSS3中，可以通过box-sizing属性来指定使用哪种盒模型：
box-sizing: content-box;：标准盒模型（默认值）box-sizing: border-box;：怪异盒模型
使用box-sizing: border-box;可以让元素的总宽度和高度保持不变，即使增加了内边距或边框，内容区域的尺寸会相应减少，而不是增加元素的总尺寸。这在布局设计中非常有用，因为它允许开发者更精确地控制元素的尺寸。
