<div>：内容划分元素

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

<div> HTML 元素是流内容的通用容器。在通过 CSS 以某种方式进行样式设置之前（例如，直接应用样式，或将 Flexbox 等布局模型应用于其父元素），它不会对内容或布局产生任何影响。

试一试

<div class="warning">
  <img
    src="/shared-assets/images/examples/leopard.jpg"
    alt="An intimidating leopard." />
  <p>Beware of the leopard</p>
</div>

.warning {
  border: 10px ridge red;
  background-color: yellow;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
}

.warning img {
  width: 100%;
}

.warning p {
  font: small-caps bold 1.2rem sans-serif;
  text-align: center;
}

作为一个“纯”容器，<div> 元素本身不代表任何内容。相反，它用于分组内容，以便可以使用 class 或 id 属性轻松设置样式，使用 lang 属性标记文档的某个部分为使用不同语言编写，等等。

属性

此元素包含全局属性。

注意： align 属性已过时；请勿再使用它。相反，您应该使用 CSS 属性或 CSS Grid 或 CSS Flexbox 等技术来对页面上的 <div> 元素进行对齐和定位。

用法说明

当没有其他语义元素（如 <article> 或 <nav>）适用时，才应使用 <div> 元素。

<div>
  <p>
    Any kind of content here. Such as &lt;p&gt;, &lt;table&gt;. You name it!
  </p>
</div>

结果

一个带样式的示例

此示例通过使用 CSS 为 <div> 应用样式来创建一个阴影框。注意在 <div> 上使用 class 属性，将名为 "shadowbox" 的样式应用于该元素。

HTML

html

<div class="shadowbox">
  <p>Here's a very interesting note displayed in a lovely shadowed box.</p>
</div>

CSS

css

.shadowbox {
  width: 15em;
  border: 1px solid #333333;
  box-shadow: 8px 8px 5px #444444;
  padding: 8px 12px;
  background-image: linear-gradient(180deg, white, #dddddd 40%, #cccccc);
}

结果

技术摘要

内容类别	流内容，可感知内容。
允许内容	流内容. 或者（在 WHATWG HTML 中）：如果父元素是 `<dl>` 元素：一个或多个 `<dt>` 元素，后跟一个或多个 `<dd>` 元素，还可以选择性地混合 `<script>` 和 `<template>` 元素。
标签省略	无，起始标签和结束标签都必须存在。
允许父级	任何接受流内容的元素。或者（在 WHATWG HTML 中）： `<dl>` 元素。
隐式 ARIA 角色	`generic`
允许的 ARIA 角色	任意
DOM 接口	`HTMLDivElement`