使用div和css创建盒子模型，通过class定义样式，结合width、padding、border、margin设置布局，box-sizing控制尺寸计算，flex等布局方式实现多盒排列，掌握细节可精准控制页面结构。

在html中创建盒子，主要依靠 div 标签结合 CSS 来实现。div 是一个块级容器，可以用来划分网页结构，通过CSS设置样式后，就形成了所谓的“盒子模型”。每个盒子由内容（content）、内边距（padding）、边框（border）和外边距（margin）四部分组成。

1. 创建基本盒子（div + class）

使用 div 标签定义一个盒子，并通过 class 属性为其添加样式名称，便于CSS控制。

<div class=”box”></div>

这个 div 就是一个空盒子，下一步用CSS给它添加样式。

2. 使用CSS设置盒子样式

通过CSS定义 .box 类的样式，设置宽度、高度、背景色、边框等属性。

立即学习“前端免费学习笔记（深入）”；

.box {
  width: 200px;
  height: 100px;
  background-color: #f0f0f0;
  border: 2px solid #333;
  padding: 10px;
  margin: 20px;
}

说明：

• width / height：设置内容区域的宽高
• background-color：背景颜色
• border：边框样式（宽度、类型、颜色）
• padding：内边距，内容与边框之间的距离
• margin：外边距，盒子与其他元素之间的距离

3. 盒子模型的实际尺寸计算

盒子占据的总宽度 = 左右 margin + 左右 border + 左右 padding + width

例如上面的盒子：

文心大模型

百度飞桨-文心大模型 ERNIE 3.0 文本理解与创作

56

查看详情

• width: 200px
• padding: 10px × 2 = 20px
• border: 2px × 2 = 4px
• margin: 20px × 2 = 40px

实际占用宽度为：200 + 20 + 4 + 40 = 264px

4. 使用 box-sizing 控制尺寸计算方式

默认情况下，width 只指内容区。如果希望 width 包含 padding 和 border，可以使用：

.box {
  box-sizing: border-box;
  width: 200px;
  padding: 10px;
  border: 2px solid #333;
}

此时，width 200px 已包含 padding 和 border，整体宽度不会超出设定值，更便于布局。

5. 多个盒子的排列方式

可以通过 display、Float 或 flex 布局让多个盒子横向或纵向排列。

例如使用 Flex 布局水平排列盒子：

.container {
  display: flex;
  gap: 10px;
}

.box {
  width: 100px;
  height: 100px;
  background: #ddd;
  border: 1px solid #999;
} <div class=”container”>
  <div class=”box”></div>
  <div class=”box”></div>
  <div class=”box”></div>
</div>

这样三个盒子会自动在同一行显示，间距10px。

基本上就这些。掌握 div 结构和CSS盒子模型的设置方法，是前端布局的基础。灵活运用 margin、padding、border 和 box-sizing，能让你更精准地控制页面结构。不复杂但容易忽略细节。

以上就是