1. 基础功能：作为通用容器

<div> 是一个块级元素，用于将 HTML 文档划分为独立的区块，便于应用样式和布局。

<div id="header">这是页头</div>
<div id="main-content">
  <div class="article">文章1</div>
  <div class="article">文章2</div>
</div>
<div id="footer">这是页脚</div>

示例：div作为容器

这是一个带有样式的div容器
这是另一个带有不同样式的div容器

2. 布局功能

使用 <div> 创建页面布局，结合 CSS 实现各种布局技术。

2.1 传统浮动布局

左侧边栏 (float: left)
右侧边栏 (float: right)
主要内容区域 (自适应宽度)

2.2 Flexbox 布局

Flex 项目 1
Flex 项目 2
Flex 项目 3

2.3 CSS Grid 布局

网格项目 1
网格项目 2
网格项目 3
网格项目 4
网格项目 5
网格项目 6

3. 分组与样式化

使用 <div> 对相关元素进行分组，以便统一应用样式。

带背景渐变的分组

这个div包含标题和段落，并应用了渐变背景。

带边框的分组

这个div有自定义边框和背景色，用于突出显示内容。

4. 交互功能

通过 JavaScript 为 <div> 添加交互功能。

4.1 点击事件

点击这个div，我会改变颜色和文本

4.2 悬停效果

鼠标悬停在我上面试试

4.3 显示/隐藏内容

5. 模拟其他元素

<div> 可以结合CSS模拟其他元素的功能。

5.1 模拟按钮

看起来像按钮的div

5.2 模拟卡片

卡片标题

这是一个使用div创建的卡片组件，具有图片区域和内容区域。

查看详情

5.3 模拟表格

姓名
年龄
城市
张三
28
北京
李四
34
上海