HTML 使用<div> 元素布局

HTML <div> 元素详解

基本介绍

<div> 是 HTML 中最常用的容器元素，用于分组和布局网页内容。它是一个块级元素，默认会占据整行宽度。

标签语法

<div>
  <!-- 内容 -->
</div>

主要功能

1. 作为内容容器

2. 用于页面布局

3. 通过 CSS 实现样式化

4. 通过 JavaScript 实现交互

基本用法

<div>
  <h1>标题</h1>
  <p>段落内容</p>
</div>

CSS 扩展

<div> 通常与 CSS 结合使用实现布局和样式：

常见 CSS 属性

div {
  width: 100px;       /* 宽度 */
  height: 100px;      /* 高度 */
  background: #ccc;   /* 背景色 */
  margin: 10px;       /* 外边距 */
  padding: 20px;      /* 内边距 */
  border: 1px solid;  /* 边框 */
  display: block;     /* 显示方式 */
  position: relative; /* 定位方式 */
  float: left;        /* 浮动 */
}

布局实例

<div style="width: 80%; margin: 0 auto;">
  <div style="float: left; width: 30%;">左侧内容</div>
  <div style="float: right; width: 65%;">右侧内容</div>
  <div style="clear: both;"></div>
</div>

现代布局技术

1. Flexbox 布局

.container {
  display: flex;
  justify-content: space-between;
}

2. Grid 布局

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

实际应用示例

<div class="card">
  <div class="card-header">
    <h2>卡片标题</h2>
  </div>
  <div class="card-body">
    <p>卡片内容...</p>
  </div>
  <div class="card-footer">
    <button>确认</button>
  </div>
</div>

.card {
  width: 300px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.card-header {
  padding: 15px;
  background: #f5f5f5;
  border-bottom: 1px solid #ddd;
}

.card-body {
  padding: 20px;
}

.card-footer {
  padding: 10px;
  text-align: right;
  border-top: 1px solid #ddd;
}