盒子模型（Box Model）是前端开发中非常基础且重要的概念，尤其在处理布局和元素样式时，理解盒子模型对于设计页面至关重要。它描述了网页中元素的布局方式，决定了元素的显示尺寸以及如何与其他元素交互。
1. 盒子模型是什么？
CSS 盒子模型是指浏览器如何计算并渲染网页中每个元素的大小和位置的方式。每个 HTML 元素都可以视为一个矩形框，包含四个基本部分：
- 内容区域（Content Area）：元素实际显示的内容区域。
- 内边距（Padding）：内容区域与边框之间的空白区域，四个方向的内边距可以单独设置。
- 边框（Border）：围绕元素内容和内边距的边框，可以设置宽度、样式和颜色。
- 外边距（Margin）：元素与其他元素之间的空白区域，起到分隔元素的作用。外边距也可以单独设置。
2. 标准盒子模型与怪异盒子模型
盒子模型的标准计算方式有两种：
标准盒子模型（Standard Box Model）
在标准盒子模型中，元素的总宽度和总高度是由内容区域的宽度、高度加上内边距、边框的宽度计算出来的。例如：
总宽度 = 内容宽度 + 左边框 + 右边框 + 左内边距 + 右内边距
总高度 = 内容高度 + 上边框 + 下边框 + 上内边距 + 下内边距
怪异盒子模型（Quirks Mode Box Model）
在怪异盒子模型中，元素的总宽度和总高度包括了内容宽度和内边距，但不包括边框和外边距。因此，计算方式会有所不同。
总宽度 = 内容宽度 + 左内边距 + 右内边距
总高度 = 内容高度 + 上内边距 + 下内边距
怪异盒子模型通常出现在较旧的浏览器中，或者当文档没有指定 DOCTYPE 时。
如何控制盒子模型
你可以通过 box-sizing 属性来指定使用标准盒子模型或怪异盒子模型：
box-sizing: content-box;—— 默认的标准盒子模型，计算总尺寸时不包含边框和内边距。box-sizing: border-box;—— 使用怪异盒子模型，计算总尺寸时会将边框和内边距包含在内。
3. 实际代码示例
让我们通过实际代码来展示这两种盒子模型。
示例 1：标准盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标准盒子模型</title>
<style>
.box {
width: 200px;
padding: 20px;
border