HTML5 和 CSS3 第 4 部分：页面布局
深入探讨如何将项目放置在页面上的正确位置。
引言
在我们继续加深对 HTML 和 CSS 理解的旅程中，我们来到了想要在页面上布局内容的时候。不再是所有内容都左对齐并自上而下堆叠，我们希望弄清楚如何智能地将内容放置在页面上的各个位置。这就是本文的重点。我们的起点是对 HTML 和 CSS 的非常基础的理解。到我们完成时，我们希望能知道在网页上布局内容的最佳方法。
重要标签
在我们深入研究布局之前，有几个重要的标签需要我们回顾一下。这些 HTML 标签将帮助我们识别和定位页面上的元素。它们还有助于我们定义哪些项目属于一起。让我们来看看这两个标签，并弄清楚它们如何使用以及它们之间的区别。
Div
第一个标签是你在几乎所有网页上都能看到的标签。`div` 标签是一个块级元素，用于将 HTML 的各个部分组合在一起。“块级元素”的意思有几点。首先，它意味着在渲染的页面上，它会在其上方和下方产生空间（就像段落标签一样）。其次，它表明里面的内容是一个有机的整体。例如，如果你要用 HTML 构建一座房子，每个房间可能都会被包裹在一个 `div` 中。然后，你可能会用一个 `div` 来包裹所有一楼的房间，最后，整个房子可能被包裹在一个 `div` 中。这允许我们单独设置每个房间的样式（大小、形状等），但我们也可以为房子的整个楼层（颜色等）和整个房子（外部[边框]颜色等）应用样式。
这就引出了 `div` 部分的一个观点：它们可以嵌套。让我们用 HTML 来构建我们的“房子”，看看它会是什么样子。
<div id="house">
<div id="first-floor">
<div id="ff-bathroom" class="bathroom">
</div>
<div id="ff-diningroom">
</div>
<div id="ff-kitchen">
</div>
<div id="ff-livingroom">
</div>
</div>
<div id="second-floor">
<div id="sf-bathroom" class="bathroom">
</div>
<div id="sf-bedroom1" class="bedroom">
</div>
<div id="sf-bedroom2" class="bedroom">
</div>
<div id="sf-bedroom3" class="bedroom">
</div>
</div>
</div>
需要立即指出的一点，只是为了在此说清楚：这并不会在屏幕上渲染出一座房子。这仅仅是后端 HTML 布局的一个说明。这个演示只是为了识别布局是如何工作的。下面我们会讲到如何有效地使用它们。好的，现在我们已经说清楚了，让我们来看看这个演示带来的几个重要问题。
首先，`div` 可以有一个 `class` 或 `id`，就像其他任何 HTML 元素一样。事实上，你几乎肯定会在几乎所有的 `div` 上设置一个或两个属性。原因是你需要一种方法来识别特定的 `div` 或特定类型的 `div`，以便通过 CSS 为其应用样式。
其次，请注意，我根据我想要识别项目的方式混合使用了 `id` 和 `class`。例如，我用 `id` "ff-bathroom" 标识了第一个楼层的浴室“房间” `div`，但我也给它设置了 `class` "bathroom"。这是因为我可能有适用于浴室的样式，无论它们在哪个楼层。卧室也是如此。作为提醒，你使用 `id` 来唯一标识一个元素，使用 `class` 来将相同的样式应用于一个或多个元素。
Span
为了布局目的，我们想看的第二个元素是 `span` 元素。这是一个内联元素，用于将项目组合在一起。听起来和 `div` 差不多，对吧？在很多方面确实如此，但有几个关键的区别。第一个区别是“内联”部分。`span` 元素的使用方式是不会干扰你的布局。这意味着你可以在段落中间使用 `span` 元素，在渲染页面上你不会知道它的存在。稍后我们会看看它是如何工作的，以及为什么我们想要它。第二个区别是 `span` 只能包含其他内联元素。你不能在 `span` 中放入 `div`，但你可以在 `div` 中放入 `span`。
这一切是如何工作的，以及为什么我们要使用 `span`？让我们看一个例子。假设你正在写一段文字，并且想突出一个关键句子。要做到这一点，你可以像这样用 `span` 包裹住这个句子。
<p>
In medieval Italy, if a man was caught kissing a woman in public,
he had to marry her whether he liked it or not.
<span class="highlight">I guess kissing booths weren't very
popular back then.</span>
</p>
和 `div` 一样，我可以使用 `id` 或 `class` 来识别 `span` 以进行样式设置。在这种情况下，我选择使用 `class`，因为很可能我会在网站的其他地方突出其他句子。
何时使用 Div 和 Span
在选择 `div` 和 `span` 之间时，需要考虑的关键点是它将在哪里使用。`span` 应该只用于整体的一部分（段落中的句子、句子中的单词等）。`div` 应该用于将项目组合成一个部分。你们中有些人已经了解了一两点样式知识，可能已经预料到我会提到改变 `div` 和 `span` 的样式。例如，你可以让 `span` 像 `div` 一样工作，即它前面和后面都有一个换行符；或者你可以让 `div` 像 `span` 一样工作，即它前面和后面都没有换行符，并且可以内联使用。这是否意味着这两个项目是可互换的？不。即使你让 `span` 像块级元素一样工作，你仍然不能在 `span` 中使用块级元素。你可以内联使用 `div`，但这样做会破坏 `div` 的预期用途。
盒子模型
当我们谈论项目布局时，我们首先应该讨论的是“盒子模型”。当你讨论 CSS 时，你会经常听到这个术语。在处理布局时，它很可能也会成为你的一个挫折来源，所以理解并正确掌握它很重要。
每个块级元素都有几个项目对其整体高度和宽度做出贡献。这些包括：
- 内容 - 这是块级元素中的实际“东西”。它可以是段落中的文本，也可以是图像标签中的图像。
- 内边距 - 内容边缘与元素边框之间的空白区域。
- 边框 - 边框本身会占用空间（例如，如果你想围绕一个元素绘制一个 1 像素宽的框，这将为总高度增加两像素，为总宽度增加两像素（每边一像素）。
- 外边距 - 边框外部的空白区域。这是该元素与页面上其他元素之间的缓冲区域。
这里有一张说明这个原理的图。你会到处看到这张图。请随意嘲笑我的绘画技巧。
这很棒，而且看起来相当直接，但为什么它很重要呢？极好的问题！了解整体高度和/或宽度对于确保你的元素在页面上正确对齐非常重要。你会犯的第一个新手错误是设置 CSS 中的高度或宽度属性，并认为这就是高度或宽度（提示：事实并非如此）。你设置的是**内容**的高度或宽度。实际元素将比这个值更大，除非你明确将内边距、外边距和边框的高度或宽度值减至零。
例如，如果我们想在屏幕上放置四张图片，让它们的边缘接触，我们首先像这样在页面上放置 HTML 图像。
<body>
<h1>Pictures Example</h1>
<img class="promo" src="pic1.jpg" alt="counter" />
<img class="promo" src="pic2.jpg" alt="table" />
<img class="promo" src="pic3.jpg" alt="chair" />
<img class="promo" src="pic4.jpg" alt="texting" />
</body>
然后我们像这样为 `promo` 类创建一个 CSS 规则。
.promo {
width: 240px;
border-width: 0;
margin: 0;
padding: 0;
height: 240px;
}
这将确保所有四张图片的总高度和宽度为 240 像素。然而，这就是你开始抓狂的地方。让我们看看当我们运行网页时会得到什么。
这不对！如果我们查看页面检查器（我们还没有讲到这个——我们迟早会讲到的，但现在请相信我），我们会看到间距正如我们预期的那样工作，但图片之间仍然存在间隙。这是块级元素的产物。要解决这个问题，我们可以更改一个额外的属性：`float` 属性。如果我们让元素浮动，它就会消除元素之间的间距。要将此属性添加到我们的 CSS 规则中，我们像这样输入。
.promo {
width: 240px;
border-width: 0;
margin: 0;
padding: 0;
height: 240px;
float: left;
}
我们稍后会更深入地探讨 `float`，但现在，它允许我们将元素滑动到彼此旁边，如下所示。
这就是我们想要的。正如你所见，有时即使你做得对，也会得到意想不到的结果。这就是耐心、经验和诊断问题能力的重要性所在。不过，不要被吓倒。大多数情况并不困难和丑陋。只要你理解了盒子模型，你就不会遇到任何问题。
在我们继续之前，我想指出，我们提到的所有增加内容尺寸的属性（外边距、内边距和边框）都可以按每一侧进行操作。例如，上面我们将外边距设置为零，但如果我们想让右侧外边距为十像素呢？没问题。我们可以通过以下两种方式之一来实现。首先，我们可以一行设置四个外边距的值，如下所示。
margin: 0 10px 0 0;
这四个值分别代表顶部、右侧、底部和左侧外边距。因此，我通过在第二个位置放入 10px 将右侧外边距设置为十像素。请注意，当值为零时，你不指定单位（零是通用的），但任何其他值都需要包含单位。在大多数情况下，我们指定像素。
我们指定的右侧外边距宽度的第二种方法是专门指定，如下所示。
margin-right: 10px;
这仅指定了右边框宽度，并为其分配了十像素的值。有顶部、右侧、左侧和底部属性。这些与我们上面看到的一行方法之间的区别在于我们设置值的位置。如果我们在一行 CSS 规则中设置所有值，则使用一行方法。如果我们只设置一个、两个或三个值，但从另一个规则继承其他值，则使用第二种方法。
你可以对外边距、内边距和边框使用这种顶部、右侧、底部和左侧的赋值。这允许你非常精确地控制你的项目外观。例如，你可能想要在图片左侧有一个粗的蓝色边框，而在其他三侧没有任何东西。或者，你可能想要元素顶部和底部有内边距，但左侧和右侧没有。所有这些操作都可以通过我们在这里看到的 CSS 属性来处理。
浮动属性
我们在看图片时已经见过 `float` 属性了。`float` 允许我们将图片直接彼此靠近，而不是在它们之间留有空间。让我们更详细地了解一下 `float`，以便确切地知道它为什么起作用以及我们如何在其他场景中使用它。
`float` 属性允许元素向左或向右浮动（现在你可能觉得为这篇文章花了冤枉钱，对吧？）。例如，如果我们想让一张图片滑到页面右侧，可以通过在 CSS 规则中添加 "float: right;" 来实现。在我们的例子中，我们希望所有图片都靠左，所以我们将它们的 `float` 设置为 `left`。
这是 CSS 的一个强大功能，你很可能会在多种场景中使用它。可能发生的一个酷炫的事情是，其他元素会围绕浮动的对象工作。例如，你可以将一段文字放在右侧浮动的图片周围，如下所示。
这很酷，并且可以给我们带来一些不错的效果，尤其是在 HTML 页面会根据浏览器大小进行调整的情况下。这使得我们的页面无需我们做任何事情就能改变。与印刷杂志不同，我们是为了精确布局进行设置，HTML 会进行调整，所以我们需要使用能够适应不同分辨率的工具。`float` 对此非常有效。
现在说说 `float` 的缺点。假设你正在使用 `float` 来让图片紧挨着彼此。然后你想在图片下方放置一段描述图片的文字。你的第一个尝试可能是让图片向左浮动（这样它们就都挨着了），然后在它们后面简单地放一个段落。这样应该可以吧？好吧，让我们看看它可能变成什么样子。
这正是我们想要的。一切都很棒，对吧？嗯，在我们的机器上，是的。然而，一旦我们部署了网站，我们就会接到关于东西看起来不对的电话。在将最终用户标记为“不理解我们的伟大”之后，我们终于走到那个（没必要的）抱怨用户的格子间，然后看到这个。
糟糕。这是怎么回事？他们是不是用了 Netscape Navigator 之类的东西？不，他们用的是最新版本的 Chrome。那是什么原因呢？嗯，这是 `float` 的缺点。有时你不想让东西环绕你的浮动对象。幸运的是，解决这个问题相对简单。我们只需要清除 `float` 对段落的影响。你问如何实现这个魔法？很简单。只需将其添加到影响你的段落的 CSS 规则中。
clear: both;
这会清除你段落两侧的 `float` 效果。如果你只想清除上方图片的 `float` 效果，而不影响下面的元素，你可以说。
clear: left;
所以，总而言之，你可以浮动对象，以动态的方式将它们移动到左侧或右侧。这会影响它们周围的其他元素，所以它们可以通过应用 `clear` 属性来抵消浮动对象施加的影响。
显示属性
`display` 属性允许我们改变元素在页面上的显示方式。我之前已经暗示过这一点，我说过 `span` 可以改变成像 `div` 一样工作，而 `div` 可以改变成像 `span` 一样工作。这是通过 `display` 属性完成的。首先，让我们看看 `display` 属性的一些选项以及它们的作用。
- inline - 这使得元素像 `span` 一样工作，元素上方或下方没有额外的空间。
- block - 这使得元素像 `div` 一样工作，元素上方和下方都有额外的空间。
- inline-block - 元素内部的东西像块一样工作，但元素本身是内联的。
- list-item - 这会将项目放在列表中（就像这个项目符号列表一样）。
- none - 该元素根本不会被显示。这也意味着该元素完全不影响页面布局（这很重要）。
所以，如果我们根本不想显示一个元素，我们会将其添加到它的 CSS 规则中。
display: none;
如果相反，我们想让那个 `span` 像 `div` 一样影响布局，我们会添加这个规则。
display: block;
使用不同的 `display` 选项是我们调整布局以获得精确外观的一种方式，同时又不改变文档关于内容的说法。我们将在下面的 CSS 表格部分更深入地探讨这个主题。
除了 `display` 元素的表格选项（我们将在下面讨论）之外，我遗漏的另一个主要项目是 `flex` 元素。这是一种近年来一直在发展的显示类型。总体的想法是，元素内部的项目会根据给定的空间进行弹性伸展。对这个新的 CSS3 项目的支持仍在进行中，所以在考虑使用它时要小心。确保你了解你想要支持哪些浏览器，然后确保这些浏览器可以使用该属性。一种确定哪些被支持、哪些不被支持的方法是访问网站 CanIUse.com。这个网站告诉你哪些功能被哪些浏览器支持。它是处理 HTML5 和 CSS3 的宝贵资源。
对齐属性
对齐项目可能有点混乱，直到你对不同的选项及其预期用途有了很好的掌握。当你想到对齐时，你可能会认为有一个名为“align”的属性，它有“left、right 和 center”选项，这样就很简单了。不是的。相反，我们有很多不同的选项，这取决于我们要对齐什么。我们已经讨论了 `float` 选项，它允许我们在容器内移动元素。让我们看看更多的选项。
块级元素
块级元素已经对齐了。它们占据页面的全部宽度。但是，也许你想设置它们的宽度。默认情况下，该元素会左对齐。如何将其更改为居中？像这样。
.centered {
width: 50%;
margin-left: auto;
margin-right: auto;
}
在这种情况下，我们使用 `margin-left` 和 `margin-right` 属性设置为 `auto` 来居中我们的项目。如果我们想右对齐元素，我们可以省略 `margin-right` 属性。让我们把事情变得更复杂。假设这个元素是一个带有我们标题的 `h1` 标签。当你看到它在页面上“居中”时，它看起来会偏离。这是因为虽然元素居中了，并且只占页面宽度的一半，但里面的文本仍然是左对齐的。这就引出了我们的下一个对齐选项：文本。
文本元素
文本元素可以使用 CSS 中的 `text-align` 属性进行对齐。你的标准选项是 `left`、`right`、`center` 和 `justify`。这些工作方式与文本编辑器中的对齐选项相同。同样，请记住块级元素占据页面的全部宽度。这意味着如果你右对齐段落标签中的文本，它会与屏幕右边缘对齐（除非你更改了元素的宽度）。所以，在我们上面的例子中，如果我们想在屏幕上居中一个 `h1` 标签并居中文本，我们会像这样更新我们的 CSS 规则。
.centered {
width: 50%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
绝对定位
这是定位的“大杀器”，应该谨慎使用。通常，HTML 页面是动态的，因为它们会根据显示它们的窗口大小进行调整。然而，有时你希望一个元素始终处于特定位置，无论如何。也许你希望你的 logo 始终位于屏幕的右下角。要做到这一点，你可以创建一个类似的规则。
.logo {
position: absolute;
right: 0;
bottom: 0;
}
首先，我们将 `position` 设置为 `absolute`。这会关闭基于屏幕宽度、元素周围等进行的调整。接下来，我们将 `bottom` 和 `right` 属性设置为零。这样做意味着我们希望它距离右边缘零像素，距离底部边缘零像素。因此，你可以使用 `left` 而不是 `right` 将 logo 放在左下角。
在使用这种定位时要小心。在不同浏览器或不同分辨率下查看时，它可能会导致意外或不良的效果。总的来说，不要对抗 HTML 的动态性。相反，拥抱它并在系统内部工作。
列表
在之前的文章中，我讲了无序列表和有序列表，以及如何用 CSS 来修改它们。我们在 `display` 部分也看到，即使一个 `div` 实际上是一个列表，我们也可以将其改变成像列表一样工作。正如我们将在 CSS 表格部分看到的，HTML 有两个方面——人类看到的一面和计算机看到的一面。列表允许我们将事物组织成一个计算机可以读取的层级结构，同时对人类也很有意义。列表的一个用途是站点导航。列表非常适合菜单中的父子同级关系。这是一个例子。
<ul>
<li>Food
<ul>
<li>Hamburgers</li>
<li>Hot Dogs</li>
</ul>
</li>
<li>Snacks
<ul>
<li>Popcorn</li>
<li>Pretzels</li>
</ul>
</li>
<li>Drinks</li>
</ul>
请注意，在“食物”下有一个子菜单。对于“零食”也是如此，但“饮料”没有子菜单。然后你可以利用 CSS 将此列表样式化成一个菜单。有很多选项可以用来修改元素，在此文章中不可能全部介绍。不过，为了让你开始，可以尝试在 CSS 规则中添加以下属性。
- list-style-type: none; - 这会去掉列表通常关联的圆点或数字。将此应用于你的 `ul` 或 `ol` 元素。
- display: inline; - 这会将你的垂直列表转换为水平列表。将此应用于你的 `ul` 或 `ol` 元素。
- width: 240px; - 这个大小由你决定，但设置一个标准宽度可以确保你的菜单选项是统一的。将此应用于你的 `li` 元素。
- border: 1px solid #000; - 这会给你的所有元素一个明确的边框。将此应用于你的 `li` 元素。
- background-color: #b6ff00; - 这会给你的所有元素一个背景色，以帮助它们脱颖而出。将此应用于你的 `li` 元素。
CSS 表格
早期我们学习了 HTML 表格以及它们为何不应用于页面布局。原因是因为 `table` 元素会告诉浏览器关于数据的信息。它会告诉浏览器“这是一个数据电子表格”。除非你在网格中放入棒球运动员的统计数据，或者类似的东西，否则你不应该使用 HTML 表格来布局页面上的项目。
问题是，有时你希望项目像表格一样在页面上布局。那么我们该怎么办？好吧，这就需要 CSS 表格了。我们可以使用 `display` 属性（还记得上面的那个吗？）来将我们的 `div` 元素识别为表格的不同部分。我们在 CSS 中用于 `display` 属性的值是：
- table - 这是包裹整个表格的内容（我刚才是不是震撼了你）。
- table-row - 这是包裹表格中一整行的内容。
- table-cell - 这是行中的一个单元格。
- table-row-group - 这会将所有数据行分组在一起（表格的主体）。
- table-header-group - 这会将所有标题行分组在一起。
还有其他标签可供使用，适用于更高级的情况，但这些是你将使用的主要标签。每一个都将一个 `div` 变成其表格对应物的布局等效项。让我们看看如何设置。首先，我们来看 CSS。
.container {
display: table;
}
.header-section {
display: table-header-group;
}
.data-section {
display: table-row-group;
}
.row {
display: table-row;
}
.data-item {
display: table-cell;
}
这为我们创建了五个 CSS 类规则。现在我们可以在 HTML 中使用它来像这样设置我们的表格。
<div class="container">
<div class="header-section">
<div class="row">
<div class="data-item">Item</div>
<div class="data-item">Price</div>
</div>
</div>
<div class="data-section">
<div class="row">
<div class="data-item">Hamburger</div>
<div class="data-item">$5.50</div>
</div>
<div class="row">
<div class="data-item">Hot Dog</div>
<div class="data-item">$4.75</div>
</div>
</div>
</div>
现在我们有了表格的布局，而实际上没有使用 HTML 表格。为什么这很重要？嗯，请记住，HTML 表格会告诉浏览器关于它所包含数据的信息。CSS 表格不告诉浏览器任何信息，除了“像这样布局这些部分”。这似乎是一个小区别，但它很重要。现代网页设计面向两个不同的受众：人类和计算机。对于人类用户来说，HTML 表格和 CSS 表格看起来没有区别。然而，对于计算机查看器（网络爬虫、屏幕阅读器等）来说，HTML 表格与 CSS 表格有本质区别。
结论
这就是全部了。简单吧？嗯，也许不是。我们在本文中确实涵盖了一些棘手的课题。布局元素，尤其是在将要在不同宽度和不同浏览器中查看的页面上布局元素，有时会很困难。但是，如果你专注于我们在这里学到的基础知识，并且仔细思考浏览器在做什么，你就会没事的。