HTML div 标签：是什么、div class、布局与样式

div 标签的作用

<div>（division 的缩写）是一个通用容器。它把元素组合在一起，让你可以把它们当作一个整体来设置样式、定位或用脚本操作。它本身看不出任何东西：没有外边距、没有边框、没有特殊字体。它是一个块级元素，所以会从新的一行开始，并横向占满可用宽度。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>div</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    div { border: 2px dashed #2563eb; padding: 8px; margin-bottom: 8px; }
  </style>
</head>
<body>
  <div>
    <h2>A group</h2>
    <p>The dashed border shows the div around the heading and this paragraph.</p>
  </div>
  <div>A second div starts on a new line.</div>
</body>
</html>

删掉样式中的 border 那一行，div 就看不见了：这就是 div 的默认外观。它在视觉上的一切效果都来自 CSS。

div class 和 id

div 通常会有一个 class，也就是 CSS 要选中的名称。共用同一个 class 的 div 共享同样的样式：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>div class</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; background: #f3f4f6; }
    .card { background: white; border: 1px solid #e5e7eb; border-radius: 10px; padding: 16px; margin-bottom: 12px; }
    .card h3 { margin: 0 0 4px; }
    .card.highlight { border-color: #2563eb; box-shadow: 0 0 0 3px #bfdbfe; }
  </style>
</head>
<body>
  <div class="card">
    <h3>Basic</h3>
    <p>class="card"</p>
  </div>
  <div class="card highlight" id="pro">
    <h3>Pro</h3>
    <p>class="card highlight" and id="pro"</p>
  </div>
</body>
</html>

.card 为两个盒子设置样式，.card.highlight 给同时具有两个 class 的 div 加上蓝色外框。需要指向某一个特定的 div 时用 id，例如作为链接目标（href="#pro"）。属性一文详细比较了 class 和 id。

让 div 并排显示

div 是块级元素，所以会垂直堆叠。要让它们排成一行，就把它们的父元素变成 flex 容器：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Divs side by side</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    .row { display: flex; gap: 12px; }
    .col { flex: 1; padding: 12px; border-radius: 8px; background: #e5e7eb; }
    .col.wide { flex: 2; background: #dbeafe; }
  </style>
</head>
<body>
  <div class="row">
    <div class="col">One</div>
    <div class="col wide">Two (twice as wide)</div>
    <div class="col">Three</div>
  </div>
</body>
</html>

.row 上的 display: flex 让子元素排成一行，gap 设置间距，flex 的值分配宽度（这里是 1 : 2 : 1）。这种父元素加子元素的模式是真实网站中 div 最常见的用法。要让 div 居中，参见如何让 div 居中。

嵌套 div

div 可以包含其他 div，层数不限。每一层都是盒子里的盒子，给每个 div 加上边框和一些内边距就能看出来：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nested divs</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    div { border: 2px solid #2563eb; padding: 10px; }
    .page { background: #eff6ff; }
    .sidebar { background: #fef3c7; border-color: #f59e0b; }
    .content { background: white; margin-top: 8px; }
  </style>
</head>
<body>
  <div class="page">
    .page
    <div class="sidebar">.sidebar</div>
    <div class="content">
      .content
      <div>an inner div</div>
    </div>
  </div>
</body>
</html>

在布局允许的前提下，嵌套越浅越好。每多一层包装，就多一个盒子需要你去分析，尤其是当外边距或宽度和预期不一样的时候。

用 div 还是语义标签？

div 对它的内容什么也没说明。HTML 有一些标签同样能完成分组，还能说明这一组是什么：

在你设置样式之前，这些标签看起来和 div 完全一样，但屏幕阅读器会朗读它们，并让用户在它们之间跳转，搜索引擎也能读懂页面结构。只为布局或样式存在的盒子才用 div，比如上面的 .row 包装层。完整的标签列表参见语义化 HTML。

div 不是按钮

带点击处理函数的 div 在鼠标用户看来可以点击，但键盘用户无法用 Tab 键到达它，也无法用 Enter 键按下它，屏幕阅读器也不会把它当作按钮朗读：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>div vs button</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .fake, button { display: inline-block; padding: 8px 14px; border-radius: 6px; border: 0; background: #2563eb; color: white; font: inherit; cursor: pointer; margin: 4px; }
  </style>
</head>
<body>
  <div class="fake" onclick="document.getElementById('out').textContent = 'div clicked'">div</div>
  <button onclick="document.getElementById('out').textContent = 'button clicked'">button</button>
  <p id="out">Click the preview, then press Tab: only the button gets focus.</p>
</body>
</html>

执行操作用 <button>，跳转页面用 <a href>。两者都能获得焦点，并且天生支持键盘操作。

常见错误

• 把 div 放在 <p> 里。 段落会在 div 之前就关闭。把 div 作为外层元素，或者在段落里用 <span>。
• 满屏都是 div。 只由 div 组成的页面对屏幕阅读器来说没有结构。在合适的地方把 div 换成 <header>、<nav>、<main> 和 <footer>。
• 可点击的 div。 请改用 <button> 或链接。
• 以为 div 的宽度和文字一样。 div 会占满整个宽度。想让它收缩，就用 display: inline-block、width: fit-content 或 <span>。
• 在多个 div 上重复使用同一个 id。 会重复出现的东西请用 class。