3.1.1 盒模型基础
盒模型是CSS布局的基础，它将HTML元素视为一个包含内容、内边距（padding）、边框（border）和外边距（margin）的矩形盒子。这个盒子模型称为CSS盒模型。
内容
内容（content）是盒子的核心部分，通常指的是元素的文本内容，但它也可以包括图像、视频等元素。
内边距
内边距（padding）是内容区域与边框之间的空间。内边距可以通过padding属性进行设置，例如padding: 10px;。
边框
边框（border）是围绕在内容区域和外边距之间的线。边框可以通过border属性进行设置，例如border: 1px solid black;。
外边距
外边距（margin）是盒子与其他盒子之间的空间。外边距可以通过margin属性进行设置，例如margin: 10px;。
3.1.2 类型差异
CSS中的盒模型有两种主要类型：IE盒模型和标准盒模型。
IE盒模型
IE盒模型将边框（border）和内边距（padding）包含在元素的总宽度和总高度内。这意味着，如果一个元素设置了边框和内边距，那么元素的实际宽度和高度会大于其指定的宽度和高度。
标准盒模型
标准盒模型则将边框（border）和内边距（padding）排除在元素的总宽度和总高度之外。这意味着，元素的指定宽度和高度仅包括内容（content）的宽度和高度，不包括边框和内边距。
在CSS中，可以通过box-sizing属性来设置盒模型类型。例如，box-sizing: border-box;表示使用IE盒模型，box-sizing: content-box;表示使用标准盒模型。
默认情况下，HTML元素使用的是标准盒模型。但在老版本的Internet Explorer中，元素使用的是IE盒模型。为了兼容老版本的IE浏览器，开发者可能需要使用box-sizing: border-box;来确保元素的总宽度和总高度包括边框和内边距。
3.1.3 示例
下面是一个示例，展示了如何使用CSS盒模型来设置元素的宽度和高度，并显示类型差异：
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid black;
box-sizing: border-box; /* 使用IE盒模型 */
}
.box-standard {
width: 200px;
height: 200px;
border: 1px solid black;
padding: 10px;
box-sizing: content-box; /* 使用标准盒模型 */
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box-standard"></div>
</body>
</html>在上面的示例中，.box类使用了IE盒模型，因此其总宽度和总高度包括了边框的宽度。而.box-standard类使用了标准盒模型，其总宽度和总高度仅包括内容的宽度和高度，不包括边框和内边距的宽度。