div 的使用。 （1）理解掌握盒状模型的用法。 （2）使用 div 进行网页布局及元素定位。给出代码

div 全称为“Division”，在HTML中是一个块级元素，用于划分文档结构，通常用于创建容器来组织内容和样式。它是CSS盒模型的核心应用之一。盒模型将每个div元素视为包含四个部分：内容(content)、内边距(padding)、边框(border)和外边距(margin)。

（1）理解盒模型：
- 内容区域（Content）：实际显示的文字、图片等内容。
- 内边距（Padding）：内容区域周围的空白空间。
- 边框（Border）：包围内容区域和内边距的线。
- 外边距（Margin）：边框之外的空白区域，可以影响与其他元素的距离。

例如，如果你想设置一个div的宽度为200px，高度为100px，并有10px的内边距和1px的边框，代码会像这样：

<style>
  .myDiv {
    width: 200px;
    height: 100px;
    padding: 10px; /* 内边距 */
    border: 1px solid black; /* 边框 */
  }
</style>

<div class="myDiv">这是div的内容</div>

（2）div的布局和定位：
- 浮动(float)：让div元素脱离普通文档流，常用于侧边栏或轮播图等布局。
- 宽度和高度控制：通过百分比、固定像素或`auto`等值调整大小。
- flexbox 或 CSS Grid：现代布局技术，灵活地对齐、分布和嵌套元素。
- position 属性：配合top, right, bottom, left属性，可以实现绝对定位、相对定位等效果。

示例：使用flexbox布局水平居中一个div：

<style>
  .container {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    height: 100vh; /* 占满视口高度 */
  }
  
  .content {
    background-color: #f1f1f1;
    padding: 20px;
  }
</style>

<div class="container">
  <div class="content">这是一段位于中间的文本</div>
</div>