<div>:内容划分元素
尝试一下
作为一个“纯粹的”容器,<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>
<p>这里可以是任何内容,比如 <p>,
<table>,一切由你作主!</p>
</div>
结果看起来像这样:
样式实例
本例使用 CSS 将样式应用于<div>,从而创建一个阴影框。注意使用<div>上的 class
属性将名为“shadowbox”的样式应用于元素。
HTML
<div class="shadowbox">
<p>Here's a very interesting note displayed in a
lovely shadowed box.</p>
</div>
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