HTML Content Division 元素 (<div>) 充当容器，将网页构造成单独的组件以进行单独的样式设置。 本教程将教您如何在您的网页上创建和设置 <div> 容器的样式。
就其本身而言，<div> 元素对页面的布局影响不大，通常被赋予 属性 来调整其大小、颜色、位置或其他特征。 通常，开发人员使用 CSS 设置 <div> 元素的样式，但本教程将通过直接在 HTML 文档中设置样式让您了解 <div> 元素的工作原理。
<div> 元素使用 HTML style 属性设置样式。 如下例所示，一个 <div> 元素可以包含多个样式属性：
<div style=”property: value; property: value;”></div>
请注意，<div> 元素具有开始和结束标记，但不需要任何内容。 要了解 <div> 元素在实践中的工作原理，请清除 index.html 文件并将以下代码粘贴到其中。 （如果您还没有学习教程系列，您可以在我们的教程 设置 HTML 项目 中查看设置 index.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> 元素。
