简介
在本教程中，您将学习_CSS方框模型_，这是一种用于指代HTML元素的内容、填充、边框和边距的模型。了解 CSS 方框模型有助于调整 HTML 元素上述任何部分的大小，也有助于理解元素的大小和位置是如何确定的。本教程将首先解释 CSS 方框模型中的每个方框，然后通过实际练习使用 CSS 样式规则调整它们的值。
CSS方框模型示意图](assets/how-to-build-a-website-with-css/css-box-model-1.png)
先决条件
要学习本教程，请确保您已按照本系列教程如何设置 CSS 和 HTML 练习项目中的说明设置了必要的文件和文件夹。
CSS 盒模型
HTML 元素可以理解为一系列四个重叠的方框：
- 内容框是放置文本或图片内容的最内层框。默认情况下，它的大小通常由所包含内容的大小来设置。它也是方框模型中唯一一个默认值通常_不_为零（如果它包含内容)的方框；相比之下，对于许多 HTML 元素（如
<p>、<h1>和<img>元素)，除非您另行指定，否则元素的 padding、border 和 margin 默认为零。当你设置元素的宽度和高度值时，通常是在改变内容框的宽度和高度。 - 填充框是第二个重叠框，由环绕内容框的透明空间组成。默认情况下，许多 HTML 元素的 padding 都设置为零。增大元素的 padding 会增加内容框与边框之间的距离。
- 边框是围绕填充框的第三个重叠框。默认情况下，大多数 HTML 元素的边框值都设置为零。增大元素边框的尺寸会增加填充框与边框之间的距离。请注意，边框的颜色、粗细和样式都可以调整。
- margin 框是第四个也是最后一个重叠框，由元素边框外的透明空间组成。默认情况下，某些 HTML 元素的边距值设置为零，但有些元素的边距值是指定的，如标题标签
<h1>至<h6>。有时也允许两个不同元素的边距重叠，这种行为称为_margin collapse_。当这种情况发生时，边距大小默认为元素边距最大的那个元素的边距大小。
现在，您已经熟悉了 CSS 方框模型的各个组件，您可以练习为这些不同的方框设置样式，以探索它们如何协同工作来布局和设置 HTML 元素的样式。首先，您将创建一个包含文本内容的"
使用 CSS 调整 HTML 元素的内容大小
首先，确保已按照本系列教程如何设置 CSS 和 HTML 练习项目 中的说明设置了必要的文件和文件夹。
删除styles.css文件中的所有内容（如果该文件包含以前教程中的内容)，然后在styles.css文件中添加以下 CSS 规则：
1[label styles.css]
2.yellow-div {
3 background-color:yellow;
4}
保存 styles.css 文件。您刚刚使用类选择器 yellow-div 创建了一个类。任何指定了该类的 <div> 元素都将具有黄色背景颜色。
接下来，删除 index.html 文件中的所有内容（第一行代码除外)：<link rel="stylesheet" href="css/styles.css">)，并添加以下代码段：
1[label index.html]
2<div class="yellow-div">
3Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
4</div>
保存文件并在浏览器中加载。您应该会收到以下结果：
带有黄色
你的网页应该显示一个黄色方框，其中包含你添加到 HTML 文件中的文本内容。目前，只有最内层的框--内容框--有大小和值，而 padding、border 和 margin 都设置为零。还请注意，黄色方框的宽度和高度是由 <div> 容器内文本内容的大小自动决定的。请尝试添加或减少文本内容，以了解 <div> 容器的大小是如何相应变化的。
<$>[注］ 注意 ：您可以使用 Firefox 的 Web Developer 工具查看 HTML 元素的方框模型以及为每个方框设置的值。导航至顶部菜单栏中的 "工具 "菜单项，然后从下拉菜单中选择 "网页开发工具/切换工具"。开发工具 "应出现在窗口底部。单击工具包菜单最左侧的箭头图标，然后单击要检查的元素。所选元素的方框模型将显示在 "开发工具 "窗口窗格的右下方。您可能需要展开窗口才能查看。
使用 Firefox Web Developer 工具查看元素方框模型的 Gif](assets/how-to-build-a-website-with-css/view-box-model.gif) <$>
接下来，让我们来指定 <div> 容器的宽度，研究这将如何改变元素在浏览器中的显示效果。在styles.css文件的 CSS 规则中添加以下突出显示的一行，将width设置为 500 像素：
1[label styles.css]
2.yellow-div {
3 background-color:yellow;
4 width: 500px;
5}
保存文件并在浏览器中加载。现在，您的 <div> 容器宽度应为 500 像素，其高度会自动调整，使文本内容能够容纳其中：
请注意，您也可以指定<div>元素的高度，并允许宽度自动调整。或者，您也可以同时指定高度和宽度，但要注意，如果 <div> 元素太小，内容就会溢出 <div> 容器。
如何使用 CSS 调整 HTML 元素的填充大小
接下来，让我们增加 padding 的大小，研究它如何改变 <div> 元素的显示效果。在styles.css文件的 CSS 规则中添加以下突出显示的一行，将padding设置为 25 像素：
1[label styles.css]
2.yellow-div {
3 background-color:yellow;
4 width: 500px;
5 padding:25px;
6}
保存styles.css文件，然后在浏览器中重新加载index.html文件。黄色方框的大小应扩大到在文本内容和方框周边之间留出 25 像素的空间：
你可以通过调整填充值大小来改变填充的大小。您还可以使用以下属性更改元素特定边的 padding 大小：padding-left、padding-right、padding-top、padding-bottom。例如，请尝试用下面突出显示的代码段替换styles.css文件中的声明padding:25px;`：
1[label styles.css]
2.yellow-div {
3 background-color:yellow;
4 width: 500px;
5 padding-left:25px;
6 padding-right: 50px;
7 padding-top: 100px;
8 padding-bottom: 25px;
9}
保存 styles.css 文件，然后在浏览器中加载 index.html 文件。您应该会收到类似下面的内容：
在安排网页内容时，了解如何为元素的各个边指定填充尺寸会非常有用。
使用 CSS 调整 HTML 元素的边框大小、颜色和样式
现在让我们来练习设置 HTML 元素的边框值。通过 border 属性，您可以设置 HTML 元素的大小、颜色和样式（如 "实心"、"虚线"、"点状"、"内嵌 "和 "外嵌")。这三个值的设置方法如下
1selector {
2 border: size style color;
3}
试着添加以下高亮声明，以添加一个 5 像素宽的纯黑色边框：
1[label styles.css]
2.yellow-div {
3 background-color:yellow;
4 width: 500px;
5 padding: 25px;
6 border: 5px solid black;
7}
(您可能需要删除上一节教程中不同的 padding 声明，代之以单一的 padding:25px; 声明，以保持规则集易于管理)。保存 styles.css 文件，并在浏览器中重新加载 index.html 以查看更改。现在，黄色方框的边框应与 CSS 规则中设置的值一致：
您可以尝试更改这些值，研究它们如何改变元素在浏览器中的显示效果。与 padding 一样，您也可以使用属性 border-right、border-left、border-top 和 border-bottom，指定要调整的边框边线。
使用 CSS 调整 HTML 元素的边距大小
接下来，让我们尝试用 CSS 调整元素的边距大小。在这个练习中，我们将给页边距一个非常大的值，这样就可以很容易地看到页边距的大小在浏览器中是如何显示的。在styles.css文件的规则集中添加以下高亮声明，将边距设置为 100 像素：
1[label styles.css]
2 .yellow-div {
3 background-color:yellow;
4 width: 500px;
5 padding: 25px;
6 border: 5px solid black;
7 margin:100px;
8}
保存 styles.css 文件，然后在浏览器中重新加载 index.html 以查看更改。黄色框应向下移动 100 像素，向右移动 100 像素，以便在其边框和视口边缘之间留出 100 像素的边距空间：
<$>[注］ 注意 ：您可能已经注意到，黄色方框的顶部和左侧与视口边缘之间原本留有一小块空白。有些浏览器会自动创建这个边距，以便在视口边缘和网站内容之间留出空间。您可以通过将顶部和左侧边距设置为零来移除该边距。 <$>
与 padding 和 border 一样，可以使用 margin-left、margin-right、margin-top 和 margin-bottom设置 margin 特定边的大小。
在继续之前，请在页面中添加另一个 <div> 容器，以研究边距如何影响附近内容的位置。在不擦除任何内容的情况下，将附加 CSS 规则集添加到styles.css文件中：
1[label styles.css]
2. . .
3.blue-div {
4 height:100px;
5 width:100px;
6 background-color: blue;
7}
保存文件并返回到 index.html 文件。在不删除任何内容的情况下，在文件中添加以下 <div> 元素，并为其指定 blue-div 类：
1[label index.html]
2…
3<div class="blue-div"></div>
保存您的 index.html 文件并在浏览器中加载它。您应该会收到类似下面的内容：
现在，浏览器应显示一个宽 100 像素、高 1000 像素的蓝色方框。由于黄色方框有边距（margin)，这个蓝色方框应比黄色方框低 100 像素。一般来说，默认情况下，周围的元素会因边距（margin)而远离某个元素。但要注意的是，由于边距折叠，相邻元素的边距经常会重叠。重叠边距的大小由两个元素之间最大边距的大小决定。
结论
在本教程中，您将了解 CSS 框模型以及如何调整其内容、padding、border 和 margin 属性的大小。了解这些属性的行为以及如何设置它们的值，对于在网页上组织和设置内容样式非常有用。这些知识将有助于在其余教程中构建演示网站。在下一个教程中，您将设置一个 index.html 文件作为网站的主页。