# HTML <div> 元素全面指南

<div> 是 HTML 中最常用、最通用的容器元素。它是 "division"（分割）的缩写，用于将文档分割成独立的部分，没有特定的语义含义，主要用于布局和样式化。

## 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 显示/隐藏内容

这个内容可以通过按钮显示或隐藏。这是通过切换div的display属性实现的。

## 5. 模拟其他元素

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

### 5.1 模拟按钮

看起来像按钮的div

### 5.2 模拟卡片

#### 卡片标题

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

查看详情

### 5.3 模拟表格

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

## 这是一个模态框

这个模态框完全使用div元素创建，通过CSS定位和JavaScript控制显示/隐藏。

模态框是网页中常见的UI组件，通常用于显示重要信息或收集用户输入。