使用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
例如上面的盒子：
- 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，能让你更精准地控制页面结构。不复杂但容易忽略细节。
