A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from http://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Elements/div below:

<div>ï¼šå†…å®¹åˆ’åˆ†å…ƒç´ - HTMLï¼ˆè¶…æ–‡æœ¬æ ‡è®°è¯è¨€ï¼‰ | MDN

<div>：内容划分元素

Baseline Widely available

<div> HTML 元素是流式内容的通用容器。它对内容或布局没有影响。除非以某种方式使用 CSS 对其进行样式设置（例如，直接应用样式，或者对其父元素应用某种布局模型，如弹性盒子），否则它对内容或布局没有影响。

尝试一下 
<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 #f00;
  background-color: #ff0;
  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 网格布局或 CSS 弹性盒子来对齐和定位页面上的 <div> 元素。

使用说明 示例 一个简单示例 
<div>
  <p>这里可以是任何内容。例如 &lt;p&gt;、&lt;table&gt;。你说什么就是什么！</p>
</div>
结果 一个样式化示例

此示例通过使用 CSS 将样式应用于 <div> 来创建一个阴影盒子。注意在 <div> 上使用 class 属性将名为 "shadowbox" 的样式应用于元素中。

HTML 
<div class="shadowbox">
  <p>这是一张非常有趣的说明，陈列在一个可爱的影盒里。</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);
}
结果 无障碍考虑

<div> 元素具有一个隐含角色 generic，而不是 none。这可能会影响某些 ARIA 组合声明，这些声明希望具有特定角色的直接后代元素能正常运行。

技术概要 规范 浏览器兼容性 参见

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4