<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`