HTML 中最常用的<div>容器元素

有HTML 网页<div> 元素详解

基本介绍

<div> 是 HTML 中最常用的容器元素，用于将文档分割为独立的区块，本身不表示任何特定内容，主要用于 CSS 样式化和 JavaScript 操作的分组。

标签语法

<div>内容</div>

主要功能

• 文档结构分组

• CSS 样式应用容器

• JavaScript 操作的目标元素

• 页面布局的基础单元

常用属性

• id - 唯一标识符

• class - 样式类名

• style - 内联样式

• title - 提示文本

基本用法示例

<div id="header">
  <h1>网站标题</h1>
</div>

<div class="content">
  <p>这里是主要内容区域</p>
</div>

<div style="background-color: #f0f0f0; padding: 20px;">
  带样式的 div 区块
</div>

CSS 扩展

<div> 常与以下 CSS 属性配合使用：

布局相关

div {
  display: block; /* 默认值，可改为 flex, grid, inline-block 等 */
  position: static; /* 可改为 relative, absolute, fixed, sticky */
  float: left | right | none;
  clear: both | left | right;
}

盒模型

div {
  width: 100%;
  height: 200px;
  margin: 10px;
  padding: 15px;
  border: 1px solid #ccc;
  box-sizing: border-box; /* 或 content-box */
}

背景与装饰

div {
  background-color: #ffffff;
  background-image: url('image.jpg');
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.9;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
  border-radius: 5px;
}

现代布局示例

<div class="flex-container">
  <div class="item">项目1</div>
  <div class="item">项目2</div>
  <div class="item">项目3</div>
</div>

<style>
.flex-container {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.item {
  flex: 1;
  padding: 20px;
  background: #eee;
}
</style>