HTML Content Division 元素 ( <div>) 充当容器，将网页结构化为单独的组件以进行单独的样式设置。本教程将教您如何<div>在网页上创建容器并为其设置样式。

就其本身而言，该<div>元件在页面的布局影响不大，通常给出的属性来调整其大小，颜色，位置，或其他特征。通常，开发人员<div>使用 CSS 为元素设置样式，但本教程将<div>通过直接在 HTML 文档中设置样式来让您了解元素的工作原理。

该<div>元素使用 HTMLstyle属性设置样式。如下例所示，一个<div>元素可以包含多个样式属性：

<div style=”property: value; property: value;”></div>

请注意，该<div>元素具有开始和结束标记，但不需要任何内容​​。要了解该<div>元素在实践中的工作原理，请清除您的index.html文件并将以下代码粘贴到其中。（如果您还没有关注教程系列，您可以index.html在我们的教程设置您的 HTML 项目 中查看设置文件的说明。

<div style="width:300px;height:200px; background-color:red;">
</div>

保存文件并在浏览器中重新加载它。（有关在浏览器中加载文件的说明，请在此处查看我们的教程。）您应该会收到一个宽度为 300 像素、高度为 200 像素的红色框，如下所示：

您还可以<div>通过在开始和结束<div>标记之间添加内容来向元素添加内容。尝试在<div>标签之间添加文本，如下所示：

<div style="width:300px;height:300px; background-color:red;">
  This is text inside a div. 
</div>

保存文件并在浏览器中重新加载它。你应该会收到这样的信息：

您也可以将<div>容器放入容器内 <div>。尝试<div>在红色<div>容器内添加一个黄色容器，如下所示：

<div style="width:300px;height:300px; background-color:red;">
  <div style="width:100px;height:100px; background-color:yellow;">
  </div>  
</div>

保存文件并在浏览器中重新加载它。你应该会收到这样的信息：

请注意，<div>元素是块级元素，将从它们自己的行开始并将后续元素向下推到下一行。尝试将另一个<div>元素添加到您的文件中，以了解它是如何被推到下一行的（即使似乎有足够的空间来容纳第二个<div>元素：

<div style="width:300px;height:300px;background-color:red;">
  <div style="width:100px;height:100px; background-color:yellow;">
  </div>
</div>
<div style="width:100px;height:100px; background-color:blue;">
</div>

保存文件并在浏览器中重新加载它。你应该会收到这样的信息：

您现在应该对<div>元素的工作原理有了基本的了解。<div>当我们在本教程系列的第三部分开始构建我们的网站时，我们将返回到元素。