HTML5/CSS3 入门指南 - 第 4 部分 (共 12 部分)
5.00/5 (7投票s)
布局你的第一个网页
系列文章列表
- 编写你的第一个代码
- 构建基础
- 为你的第一个网页添加样式
- 布局你的第一个网页
引言
我已经提到过，CSS 是我们用来设计 HTML 文档布局的工具。在这一部分，您将学习如何使用 CSS 进行布局...
使用代码
本部分的代码示例继续并扩展了上一部分的内容。我恳请您拿过去，并像我们学习新东西一样进行添加。
盒子模型
盒子模型是用来描述浏览器如何计算 HTML 文档中每个标签所占据空间的术语。理解它对于您创建精美网页的能力至关重要（微软花了 15 年才理解它，所以如果您需要阅读不止一次，请不要担心）。
单个标签的构成
当浏览器要渲染您的 HTML 文档时，它会为其中的每个标签创建一个矩形区域（盒子 - 因此得名）。
上图显示了单个标签的盒子构成部分。内容部分是实际的标签，其大小由浏览器计算，或者您可以使用 width 和 height 属性来设置。对于其他部分，让我们来看一些解释...
|
定义 |
解释 |
|
在内容和边框之间留出区域。每个方向都有一个属性，或者您可以使用 padding 简写属性来一起设置它们... 默认值为 0（无内边距），但如果存在，则与内容具有相同的背景。 |
|
|
border-top-width |
设置内容（以及内边距，如果有的话）周围边框的宽度。 |
|
border-top-style |
设置内容（以及内边距，如果有的话）周围边框的样式。 |
|
border-top-color |
设置内容（以及内边距，如果有的话）周围边框的颜色。 |
|
在标签周围留出区域 - 边框之外。 |
非常重要的一点是，您必须理解，当您（并且如果）设置了标签的宽度和高度（或检查浏览器分配的计算值）时，这些值仅用于内容。我们提到的所有其他属性都会添加到该宽度和高度中，所以如果您要计算任何元素的精确尺寸，您还必须添加内边距、边框和外边距！
页面构成
现在，当浏览器的渲染引擎使用标签的盒子构建页面时，有一些规则需要遵循。为了解释这些规则，首先让我介绍两个用于分组标签的概念。有些标签可以与其他标签很好地共存于同一行，它们被称为inline（行内）标签。这些标签允许其他标签位于它们的左侧和右侧，但您无法设置它们的宽度和高度，也无法设置它们的顶部和底部外边距和内边距。所有这些属性都根据标签所在的行进行计算...
另一方面，有些标签必须单独占据一个分开的块，它们被称为block（块级）标签。您可以对它们设置以上所有属性，但它们前后都会有一个换行。
由此得出：行内标签不能包含块级标签，但块级标签可以包含行内和块级标签... 例如，您在第二部分看到的 article 级别的语义元素被定义为块级，而同一部分的 text 级别的语义元素是行内（除了 blockquote）。
现在，当浏览器按照 inline-block 规则排列表示标签的这些盒子来构建页面时，它还会根据合并外边距（collapsing margins）的规则来合并外边距。合并外边距是指在满足某些规则时将垂直外边距合并为一个。在向您展示这些特定规则之前，请注意一点：合并外边距仅涉及顶部和底部外边距，因此只涉及块级标签！
可以合并成一个的外边距是：
- 具有下一个流中的块级标签的顶部外边距的块级标签的底部外边距
- 块级标签的顶部外边距与其第一个子元素的顶部外边距
- 块级标签的底部外边距与其最后一个子元素的底部外边距
让我们在实际中看看。查看 HTML 和 CSS 源代码...
<!DOCTYPE html>
<html>
<head>
<title>Boxmodel</title>
<link href="boxmodel.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h2>Title</h2>
<p>First paragrpah</p>
</body>
</html>
h2 {
margin: 20px 10px;
background-color: gray;
}
p {
margin: 10px;
background-color: aqua;
}
现在您可以看到 H2 标题有一个 20 像素高的底部外边距，段落有一个 10 像素高的顶部外边距。如果没有合并外边距规则，这两者之间应该有一个 30 像素高的空白区域，但根据该规则，我们只有 20 像素。
正如我所说，理解这些概念非常重要，因为在设计页面布局时，必须考虑这些属性和规则！
如何测量页面
您已经看到，当我为可能具有这些属性的数值分配值时，我使用了一些单位。在上一部分，我使用 *em* 来调整标签大小，刚才我使用 *px* 来设置外边距。在我们继续之前，我想向您展示 CSS 可以接受的测量单位...
长度单位
|
单位 |
解释 |
|
厘米 |
厘米。 |
|
mm |
毫米。 |
|
in |
英寸。 |
|
px |
显示设备的物理像素。 |
|
pt |
点。1 点等于 1/72 英寸。 |
|
pc |
派卡（Pica）。1 派卡等于 12 点。 |
基于字体的单位
这些单位基于您 HTML 文档中当前使用的字体进行计算。
|
单位 |
解释 |
|
em |
当前字体的行高。 |
|
ch |
当前字体中 '0'（零）字符的宽度。 |
|
rem |
分配给 HTML 文档根元素的字体的行高。 |
基于视口的单位
在移动设备领域，我们不再使用屏幕作为显示介质，而是使用视口。这些单位基于视口的大小...
|
单位 |
解释 |
|
vw |
视口宽度的 1%。 |
|
vh |
视口高度的 1%。 |
|
vmin |
视口较小尺寸的 1%。 |
|
vmax |
视口较大尺寸的 1%。 |
设置内容区域
我们已经看到了行内元素和块级元素在涉及高度和宽度时的区别。现在我想展示所有可用于设置内容块尺寸的属性... 我们的选项有 min-height、max-height、height 和 min-width、max-width、width。这些属性允许您控制一个标签的尺寸。min- 和 max- 属性用于设置一个范围，而 height 和 width 用于设置一个直接值。如果声明了多个这些属性，max- 会覆盖直接值，min- 会覆盖 max-。
这些属性可以接受 auto 关键字（默认）、数值或百分比。例如，下一个示例中的 50% 值告诉浏览器将图像的宽度和高度设置为计算宽度和计算高度的一半...
<img src="picture.png" alr="picture" width="50%" height="50%">
回到博客
我现在想从我们离开的地方拾起示例，并利用我们的新知识来增加更多美观性... 首先，我想让您注意到整个内容周围的白色间隙。这是您的浏览器添加的默认外边距。现在，在第一阶段，我想做以下几件事：
- 删除页面外边距。
- 在页眉内容和边框之间添加一些空间（内边距）。
注意： 我将不再为每一步都发布图片 - 此时您可能已经自己能看到了，所以不要只阅读文章，而是要边读边动手实践！
第一步，将您的 CSS 文件更新成如下所示：
body {
font-family: serif;
font-size: 1.2em;
margin: 0;
}
请注意，我们在 body 元素（即我们的文档）上将 margin 设置为 0。您会看到提到的白色间隙消失了，但是文本和图像现在堆叠在浏览器窗口的边缘... 非常不雅观！所以，请在内容周围添加一些内边距，使其看起来更好...
article {
background-color: #fff;
padding: 16px;
margin: 16px;
}
h1 {
background-image: url("green.jpg");
background-attachment: fixed;
line-height: 4em;
text-transform: uppercase;
font-family: fantasy;
font-size: 3em;
font-weight: 900;
padding-left: 32px;
}
header > aside {
letter-spacing: +0.15em;
white-space: nowrap;
font-family: NothingYouCouldDo;
padding-left: 16px;
}
footer p {
text-align: center;
letter-spacing: +0.05em;
font-family: monospace;
padding-top: 4px;
padding-bottom: 4px;
}
花点时间玩玩这些内边距，以获得最佳效果。
现在，在这一部分的最后一个更改中，我想重新调整我的照片大小，它有点太大了... 为此，我们在 CSS 中添加一个新规则：
header > img {
width: 50px;
height: 50px;
}
现在，为了继续我们的示例，我想通过添加一个菜单栏和一个侧边导航来移动文章之间的内容。为此，我在页眉中添加了一个无序列表，并在文章之前添加了另一个无序列表...
<header>
<img src="me.jpg" alt="me" width="150" height="150">
<aside>Kornfeld Eliyahu Peter</aside>
<h1>Me Blog</h1>
<nav>
<ul>
<li>Home</li>
<li>About</li>
</ul>
</nav>
</header>
<section class="side-menu">
<ul>
<li>Fusce vel dolor sollicitudin</li>
<li>Fusce aliquet augue</li>
</ul>
</section>
<section class="main">
[article content as before]
</section>
现在这个添加看起来有点笨拙，但随着我们继续学习，您将看到如何通过我们接下来要学习的内容来解决这个问题，所以请耐心等待...
CSS 布局的组成部分
Display 属性
您已经了解到，每个 HTML 标签都有其默认的显示模式 - 行内或块级，幸运的是，可以使用 display 属性来更改该模式。最常见的值是 inline、block 和 none。正如您所料，none 会将整个标签从渲染过程中移除。
移动您的标签
当浏览器渲染您的 HTML 文档时，任何标签的位置（top、left、right、bottom）由渲染引擎计算，并且计算出的盒子按照盒子模型的规则一个接一个地放置。我相信这不会让您惊讶，因为这也可以被改变。基本上，仅仅改变裁剪框（top、left、right、bottom）是不够的，您还必须设置 position 属性，它告诉渲染引擎如何解释裁剪框的值。
|
Position 值 |
解释 |
|
static |
这是默认值。这意味着渲染引擎将计算位置，而设置裁剪框没有任何效果。 |
|
fixed |
裁剪框定义了一个固定的位置，相对于浏览器窗口。即使窗口滚动，标签也不会移动。 |
|
relative |
裁剪框的值是相对于正常（计算的）位置的。 |
|
absolute |
裁剪框相对于标签的第一个非静态父元素进行解释。如果不存在这样的父元素，则使用根（HTML）标签。 |
具有绝对和固定定位的标签会从渲染的正常流程中移除，其余内容将像这些标签不存在一样进行渲染。这样做的结果之一是，绝对和固定标签可以与其他标签重叠，包括其他绝对或固定标签。当存在重叠的标签时，您可以使用 z-index 属性来排序它们（哪个显示在哪个上面）。具有较高 z-index 的标签将显示在具有较低 z-index 的标签前面。如果没有指定 z-index，则文档流中后面的标签将覆盖前面的标签。
浮动你的船
另一个打破盒子模型正常流程的好特性是让文本环绕图像（事实上，它适用于任何两个块级标签，但最常见的用法是将图像添加到文本流中）。要实现这一点，您需要使用 float 属性。值是 left 或 right，方向表示浮动标签将向哪一侧移动，另一侧将环绕浮动标签之后的下一个块级标签。唯一的问题是，之后的所有标签都会围绕浮动标签环绕（只要它们有空间）。有时这种行为是不可接受的。幸运的是，我们有一个属性可以停止浮动 - clear。 clear 属性的值是 left、right 或 both，其中 left 停止左侧浮动，right 停止右侧浮动，both 停止所有浮动。
浮动示例
现在，让我们使用浮动属性将侧边导航和文章内容并排显示...
section.side-menu {
float: left;
width: 25%;
}
section.main {
float: right;
width: 75%;
}
footer {
background-color: #b1b1b1;
clear: both;
}
如您所见，我们将侧边导航发送到左侧，文章发送到右侧。另外请注意 clear 属性，它将页脚恢复到正常位置。
使用边框属性
现在，我们在解释盒子模型时已经看到了一些边框属性，现在通过在每个文章周围添加一个漂亮的边框来实际应用它们。但在那之前，让我向您介绍 border-radius 属性。此属性允许您为边框创建圆角，其中数值定义用于绘制圆角的圆的半径。所以，让我们再次更新我们的 CSS 文件：
article {
background-color: #fff;
padding: 16px;
margin: 16px;
border-width: 1px;
border-style: solid;
border-color: #f90;
border-radius: 12px;
}
样式化我们的菜单
好的，现在我们有一个漂亮的博客页面，但是那些菜单真的不在位。如果您还记得，我已经提到过那些默认的项目符号（或有序列表的编号）是可以更改的，让我们看看如何实现...
|
Position 值 |
解释 |
|
此属性定义了用于列表项的符号或数字。可能的值有： 这些值用于指示基于字母的编号方案，每个值都对应其名称所指示的语言。 armenian, cjk-ideographic, georgian, hebrew, hiragana, hiragana-iroha, katakana, katakana-iroha,
lower-alpha, lower-greek, lower-latin, lower-roman, upper-alpha, upper-latin, upper-roman |
|
|
将图像加载为标记。此属性会覆盖 type 属性... |
首先，让我们看看我们的顶部菜单栏。我想移除标记，并让菜单显示在同一行。
nav ul {
list-style-type: none;
}
nav ul li {
display: inline;
}
我相信这里没有什么新鲜事，但如果您不理解 display: inline 属性，请向上滚动并再次阅读盒子模型和布局部分...
对于侧边导航，我实际上不需要更改，但我偏爱方形标记，所以让我们改变它。
section.side-menu ul {
list-style-type: square;
}
更多语义化
我们直到现在还没有使用它们（说实话，我总是最后才使用它们），但您需要了解另外两个语义化标签。这些语义化标签的唯一特殊之处在于它们没有特定的语义。这些标签可以用于任何非分类的目的。
有一个 DIV 标签，它是一个块级标签，还有一个 SPAN 标签，它是一个行内级标签。
摘要
通过这一部分，我们真正深入了 CSS 的理念和实践。唯一的跟上方法就是练习、练习，有时间的话就多练习。所以，下载源代码并扭转它，直到您理解其中的每一个细节！