欢迎来到 CSS 盒子模型（Box Model）实验！在网页设计中，每个 HTML 元素都可以被看作一个盒子。CSS 盒子模型是一个基本概念，它描述了这些盒子如何在网页上渲染。它包含四个主要部分：内容区域（content area）、内边距（padding）、边框（border）和外边距（margin）。
在这个实验中，你将学习如何操作这些组件来控制元素的大小和间距。我们将使用一个 index.html 文件和一个 style.css 文件。你所有的更改都将在 style.css 文件中进行，并且可以通过切换到 LabEx 界面中的 Web 8080 标签页来即时查看结果。
让我们开始吧！
在此步骤中，我们将开始定义元素内容区域的大小。CSS 中的 width 属性用于设置元素内容框的宽度。盒子模型（盒子模型）的其他组件（内边距、边框、外边距）将围绕此内容区域添加。
首先，在 WebIDE 左侧的文件浏览器中找到 style.css 文件。点击它在编辑器中打开。
现在，将以下 CSS 规则添加到 style.css 文件中。此规则将定位类名为 box 的 div 元素，并将其宽度设置为 300 像素。
.box {
width: 300px;
}添加代码后，保存文件（Ctrl+S 或 Cmd+S）。要查看效果，请点击 Web 8080 标签页。你会注意到盒子内的文本现在会换行，以适应一个 300 像素宽的容器。
在此步骤中，我们将在内容与元素边缘之间添加一些空间。这个空间称为 padding（内边距）。padding 属性会清除内容周围的一个区域。它位于元素边框的内部。
让我们为盒子的所有四个侧面添加 20 像素的内边距。修改 style.css 文件中现有的 .box 规则，以包含 padding 属性。
.box {
width: 300px;
padding: 20px;
background-color: lightblue; /* Added for better visualization */
}我们还添加了一个 background-color（背景颜色），以使内容和内边距区域更加可见。保存文件并切换到 Web 8080 标签页。你会看到，现在盒子内的文本内容周围有 20 像素的浅蓝色空间。请注意，盒子的整体可见宽度增加了，因为内边距是加在内容宽度之上的。
在此步骤中，我们将在元素的内边距和内容周围添加一个 border（边框）。border 属性是一个简写属性，允许你一次性设置边框的宽度、样式和颜色。
让我们添加一个 2 像素宽的实心黑色边框。按照下面的示例更新 style.css 文件中的 .box 规则：
.box {
width: 300px;
padding: 20px;
background-color: lightblue;
border: 2px solid black;
}border 属性的值分别是 border-width（边框宽度）、border-style（边框样式）和 border-color（边框颜色）。
保存文件并刷新 Web 8080 标签页。你现在会看到一条黑线绘制在盒子的内边距区域周围。元素的总宽度再次增加，以适应这个新的边框。
在此步骤中，我们将控制元素边框外部的空间。这通过 margin（外边距）属性来实现。外边距会在元素周围创建空白区域，将其他元素推开。
让我们为盒子的所有侧面添加 50 像素的外边距，以与标题和页面边缘创建一些分隔。将 margin 属性添加到 style.css 中的 .box 规则。
.box {
width: 300px;
padding: 20px;
background-color: lightblue;
border: 2px solid black;
margin: 50px;
}保存文件并检查 Web 8080 标签页。你会注意到，整个盒子现在从 <h1> 元素向下推开，并远离浏览器窗口的左边缘。这展示了外边距如何用于控制元素之间的间距。
在此步骤中，我们将解决一个常见的布局挑战。默认情况下，元素的 width（宽度）和 height（高度）属性仅应用于内容框。内边距和边框会叠加在内容框之上，这可能导致尺寸计算难以预测。对于我们的盒子，当前的总宽度是 300px (width) + 40px (left/right padding) + 4px (left/right border) = 344px。
为了简化这一点，我们可以使用 box-sizing 属性。将其设置为 border-box，我们告诉浏览器将内边距和边框包含在元素的总宽度和高度内。
将 box-sizing: border-box; 属性添加到你的 .box 规则中。
.box {
width: 300px;
padding: 20px;
background-color: lightblue;
border: 2px solid black;
margin: 50px;
box-sizing: border-box;
}保存文件并查看 Web 8080 标签页。你会看到盒子变小了。现在，包括内边距和边框在内的盒子的总宽度正好是 300 像素。浏览器会自动调整内容区域以适应。这种行为对于创建布局来说更加直观。
恭喜你完成了本次实验！你已成功掌握了 CSS Box Model（盒子模型）的基础知识。
在本次实验中，你练习了：
width（宽度）。padding（内边距）在内容和边框之间创建空间。border（边框）。margin（外边距）在元素边框外部创建空间。box-sizing: border-box 来实现更可预测和直观的元素尺寸计算。理解盒子模型对于控制网页上元素的布局和间距至关重要。请持续练习这些概念，以熟练掌握 CSS。
