<div>：内容划分元素

HTML <div> 元素 (或 HTML 文档分区元素) 是一个通用型的流内容容器，在不使用CSS的情况下，其对内容或布局没有任何影响。

尝试一下

作为一个“纯粹的”容器，<div> 元素在语义上不表示任何特定类型的内容。然而，其可以将内容分组，从而可以使用class或是id属性方便的定义内容的格式，也可以在一段文档中划分标记出使用另一种语言书写的内容（使用lang 属性）等等。

所属内容分类（Content categories） Flow content, palpable content.
允许的子元素 Flow content.
Or (in WHATWG HTML): If the parent is a <dl> element: one or more <dt> elements followed by one or more <dd> elements, optionally intermixed with <script> and <template> elements.
Tag omission 不允许，开始标签和结束标签都不能省略。
允许的父元素 Any element that accepts flow content.
Or (in WHATWG HTML): <dl> element.
Permitted ARIA roles Any
所使用的 DOM API 接口 HTMLDivElement

属性

该元素支持所有全局属性。

备注： align 属性已废弃；不要再使用它了。你应当使用 CSS Grid 或 CSS Flexbox 来对齐、定位页面上的 <div> 元素。

使用说明

  • <div> 元素应当仅在没有任何其他语义元素（比如 <article> 或 <nav>）可用时使用。

示例

一个简单的示例

html

<div>
  <p>这里可以是任何内容，比如 &lt;p&gt;, &lt;table&gt;，一切由你作主！</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 #333;
  box-shadow: 8px 8px 5px #444;
  padding: 8px 12px;
  background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
}

结果

规范

Specification
HTML Standard
# the-div-element

浏览器兼容性

BCD tables only load in the browser

参见