在 CSS 中，盒子是一个重要的概念。每个 HTML 元素在渲染出来的时候，都有一个对应的盒子，称为 CSS 盒子模型。理解 CSS 盒子模型是使用 CSS 进行页面布局和设计的基础。
盒子包含了如下几个部分：
* border（边框）: 盒子最外层的包裹，可以设置边框的宽度、样式和颜色。 * padding（内边距）: 边框与盒子内容之间的间隙，可以设置内边距的值。 * content（内容）: 盒子中呈现的内容，可以设置内容的宽度和高度。 * margin（外边距）: 盒子与其他元素之间的间隙，可以设置外边距的值。
一个完整的 CSS 盒子模型如下图所示：
+--------------------------------+ | margin | | +------------------------+ | | | border | | | | +---------------+ | | | | | padding | | | | | +-----------+ | | | | | | content | | | | | | +-----------+ | | | | +---------------+ | | | +------------------------+ | | margin | +--------------------------------+
在添加盒子的边框、内边距和外边距时，我们可以使用 CSS 的相关属性进行设置。
例如，如下代码设置了一个高度为 300 像素、宽度为 400 像素、边框宽度为 2 像素、边框颜色为红色、内边距为 20 像素、外边距为 30 像素的盒子：
.box {
height: 300px;
width: 400px;
border: 2px solid red;
padding: 20px;
margin: 30px;
}
在使用 CSS 进行页面布局和设计时，我们需要深入理解盒子模型的结构和特性，才能达到更好的效果。
