<div>:內容分區元素
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
嘗試一下
屬性
此元素包括全域屬性。
備註:
align
屬性已廢棄;請不要再使用。取而代之應該使用 CSS 屬性或技術,例如 CSS Grid 或 CSS Flexbox 來對頁面上的<div>
元素進行對齊和定位。
使用注意事項
範例
簡單範例
html
<div>
<p>
Any kind of content here. Such as <p>, <table>. 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 #333;
box-shadow: 8px 8px 5px #444;
padding: 8px 12px;
background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
}
結果
無障礙議題
<div>
元素具有隱含的 generic
角色,而不是沒有。這可能會影響某些 ARIA 組合聲明,這些聲明期望具有特定角色的直接後代元素才能正常運作。
技術摘要
規範
Specification |
---|
HTML Standard # the-div-element |
瀏覽器相容性
BCD tables only load in the browser