From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/html/element/div/index.html | 153 ++++++++++++++++++++++++++++ 1 file changed, 153 insertions(+) create mode 100644 files/zh-cn/web/html/element/div/index.html (limited to 'files/zh-cn/web/html/element/div') diff --git a/files/zh-cn/web/html/element/div/index.html b/files/zh-cn/web/html/element/div/index.html new file mode 100644 index 0000000000..15f608528b --- /dev/null +++ b/files/zh-cn/web/html/element/div/index.html @@ -0,0 +1,153 @@ +--- +title:
：内容划分元素 +slug: Web/HTML/Element/div +tags: + - Element + - HTML + - Layout + - Reference + - Web + - 元素 + - 参考 + - 布局 +translation_of: Web/HTML/Element/div +--- +
{{HTMLRef}}
+ +

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

+ +
{{EmbedInteractiveExample("pages/tabbed/div.html","tabbed-standard")}}
+ + + +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
所属内容分类（Content categories）Flow content, palpable content.
允许的子元素Flow content.
+ Or (in {{glossary("WHATWG")}} HTML): If the parent is a {{HTMLElement("dl")}} element: one or more {{HTMLElement("dt")}} elements followed by one or more {{HTMLElement("dd")}} elements, optionally intermixed with {{HTMLElement("script")}} and {{HTMLElement("template")}} elements.
Tag omission{{no_tag_omission}}
允许的父元素Any element that accepts flow content.
+ Or (in {{glossary("WHATWG")}} HTML): {{HTMLElement("dl")}} element.
Permitted ARIA rolesAny
所使用的DOM API 接口{{domxref("HTMLDivElement")}}
+ +

属性

+ +

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

+ +
+

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

+
+ +

使用备注

+ + + +

示例

+ +

一个简单的例子

+ +
<div>
+  <p>这里可以是任何内容，比如 &lt;p&gt;,
+  &lt;table&gt;，一切由你作主！</p>
+</div>
+
+ +

结果看起来像这样：

+ +
这里可以是任何内容，比如 <p>, <table>，一切由你作主！
+ +

实例：

+ +

{{EmbedLiveSample("A_simple_example", 650, 60)}}

+ +

样式实例

+ +

本例使用CSS将样式应用于<div>，从而创建一个阴影框。注意使用<div>上的 {{htmlattrxref("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);
+}
+ +

结果

+ +

{{EmbedLiveSample("A_styled_example", 650, 120)}}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('HTML WHATWG', 'grouping-content.html#the-div-element', '<div>')}}{{Spec2('HTML WHATWG')}}No changes since the latest snapshot
{{SpecName('HTML5 W3C', 'grouping-content.html#the-div-element', '<div>')}}{{Spec2('HTML5 W3C')}}Obsoleted align
{{SpecName('HTML4.01', 'struct/global.html#h-7.5.4', '<div>')}}{{Spec2('HTML4.01')}}
+ +

浏览器兼容性

+ + + +

{{Compat("html.elements.div")}}

+ +

参见

+ + -- cgit v1.2.3-54-g00ecf