【CSS in Depth 2 精译】第三章文档流与盒模型 + 3.1 常规文档流

当前内容所在位置

第一章层叠、优先级与继承（已完结）

第二章相对单位（已完结）

2.1 相对单位的威力

2.2 em 与 rem

2.3 告别像素思维

2.4 视口的相对单位

2.5 无单位的数值与行高

2.6 自定义属性

2.7 本章小结

第三章文档流与盒模型

3.1 常规文档流 ✔️

3.1.1 内容水平居中 ✔️

3.1.2 逻辑属性（精译中 ⏳）

3.1.3 用好逻辑属性的简写形式（精译中 ⏳）
译注

全新第二版《CSS in Depth》对本章内容做了大幅更新。无论是 CSS 新手还是大咖们，相信应该都可以学到满满的干货。尘封了六年的 CSS 知识体系，现在也该与时俱进一下了，不是么？

第三章文档流与盒模型

本章概要

构建页面布局的通用小贴士

设置元素大小的实用经验

逻辑属性（logical properties）简介

负的外边距与外边距折叠（margin collapsing）

保持页面组件间的间距一致

在页面上实现元素布局涉及很多技术。在一个复杂的网站上，可能会用到网格（grids）、绝对定位元素以及其他大小不一的元素。需要掌握的内容太多了，想要学会所有布局相关的技术可能有点不切实际。

本书后续几章将深入研究布局技术。在此之前我们一定要认真打好基础，深刻理解浏览器给元素设置大小和位置的工作原理。更高级的布局话题都是建立在文档流（document flow）和盒模型（box model）等概念之上的；它们都是决定页面元素尺寸和方位的基本规则。

本章将构建一个基本的 单栏页面布局（one-column page layout）。对此您可能再熟悉不过了，因为它是一个经典的 CSS 入门练习；但在跟随我的引导完成该布局后，您会发现其中经常容易被忽视的几个细节。我们将探讨盒模型的一些边界情况，并分享几个有关设置元素大小和对齐方式的实用经验。

3.1 常规文档流

本章将构建一个简单的页面，顶部是标题栏，下方则为内容。内容宽度有限，以免文本行过长。这样的布局由于不存在并排的文本块，通常被称为 单栏布局（one-column layout）。

本章结束时的页面效果如图 3.1 所示。我特意将这个页面设计成"块状"（"blocky"）风格，这样就能很清楚地看到各元素的大小和位置。

图 3.1 本章最终要构建的单栏页面布局效果

新建一个页面和一个空的样式表，并按代码清单 3.1 中的 HTML 代码更新页面。该页面包含一个标题栏（header）和一个占据页面的大部分空间的主容器。容器内的 <main> 元素包含正文内容，而 <aside> 元素则包含一些社交媒体的超链接。

代码清单 3.1 单栏页面布局 HTML 代码

html 复制代码

<!doctype html>
<html lang="en-US">
<head>
  <link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <header class="page-header">
    <h1>Franklin Running Club</h1>
  </header>
  <div class="container">
    <main class="main">
      <h2>Come join us!</h2>
      <p>
        The <b>Franklin Running Club</b> meets at 6:00pm every Thursday at the
        town square. Runs are three to five miles, at your own pace.
      </p>
      <p>
        Join us while we train for the
        <a href="/st-patricks">St. Patrick's Day 5k</a>. Don't forget to wear
        green!
      </p>
    </main>
    <aside class="social-links">
      <a href="/mastodon" class="button-link">follow us on Mastodon</a>
      <a href="/facebook" class="button-link">like us on Facebook</a>
    </aside>
  </div>
</body>
</html>

先从简单的样式开始：设置页面字体，然后再给页面和每个主容器指定背景色。这样就能在操作过程中查看每个容器的位置和大小。完成后的页面效果如图 3.2 所示。

图 3.2 带背景色的三个主要容器

相关样式代码如代码清单 3.2 所示，将其添加到样式表中。

代码清单 3.2 应用字体及颜色样式

css 复制代码

:root {
  --brand-color: #0072b0; /* 标题文字颜色设为自定义属性，以便后续复用 */
}
body {
  margin: unset;  /* 移除用户代理样式添加的外边距，以便内容能到达浏览器窗口的边缘 */
  background-color: #eee;
  font-family: Helvetica, Arial, sans-serif;
}
.page-header {
  color: #fff;
  background-color: var(--brand-color);
}
.main {
  background-color: #fff;
  border-radius: 0.5em;
}
.social-links {
  background-color: #fff;
  border-radius: 0.5em;
}

在开始调整这些元素尺寸或布局之前，需要注意默认页面布局的行为方式。页面元素通常有两种基本类型：行内（inline） 和 块（block）。每种类型都有各自不同的行为特征。

行内元素 会同页面文字一起从左至右流动。如果这些行内元素到达其容器边缘，就会换行（line wrap）。本例页面中的行内元素包括："Franklin Running Club" 字样周围的 <b> 元素，以及超链接周围的 <a> 元素。

块元素 （通常又称"块级 "元素，"block-level" elements）则在各自独立的行上进行显示。它们会自动填满所在容器的宽度。即便通过样式减少块级元素的宽度，其上下两边也会留有一个换行符（line break）。该行为是通过用户代理样式表的样式声明 display: block 实现的，涉及元素包括 <p>、<div> 和 <header> 等。

该行为也被称为 常规文档流（normal document flow）。

定义

常规文档流是指页面元素的默认布局行为。行内元素与页面文字一起从左至右流动，到达容器边缘时换行；块级元素则独立成行，且上下各带一个换行符。

需要特别注意的是，常规流的高度和宽度 在本质上是不同的。按照常规文档流的设计，宽度是受限的，而高度则不作限制。页面内容会填充其容器的宽度，然后按需换行（line wrap as necessary）。

也就是说，父元素的宽度决定了子元素的宽度，而高度则恰恰相反：子元素的高度决定了父元素的高度。因此需要对宽高分别采用不同的方法来进行操作。本章后续内容就将介绍这些方法。

3.1.1 内容水平居中

构建页面布局时，通常应先从高级 DOM 元素（higher-level DOM elements）入手。应该先确定元素自身的大小和相互间的位置关系，再聚焦处理它们的子元素。这样可以先对页面进行"粗略切割"（"rough cut"），以便后续能更加专注于处理更小的细节。

提示

布局页面最好按由外向内的顺序进行设置。先将较大的容器元素设置就位，再去处理容器内较小的元素。

页面应该对正文区的宽度进行限制。由于块级元素会默认填充其容器宽度，因此对于全宽元素（full-width element），通常无需指定 width: 100% 或 width: 100svw 样式，但通常会让默认宽度小一点。

限宽后的页面效果如图 3.3 所示。注意观察左右两边的浅灰色外边距，还有等宽的标题栏与主容器，以及同时靠左对齐的文字内容。

图 3.3 限制宽度后的页面效果

该布局常用于设置页面内容居中。也可以将内容放在两个嵌套的容器内，然后对内部容器设置外边距，令其位于外部容器的中心（如图 3.4 所示）。Web 开发者 Brad Westfall 将这种居中方案称为 双容器模式（double-container pattern）。

图 3.4 双容器模式下的内容块水平居中示意图

本例中的外部容器即 <body> 元素。默认情况下，其宽度已经是页面宽度的 100%，因此无需指定宽度；而在 <body> 内部，正文内容被包裹在了一个 <div class="container"> 元素中（即内部容器）。指定该容器的宽度，并控制好左右外边距即可设置内容居中。

同理，标题栏也可以如法炮制，以便与下方内容保持一致。此时外部容器变为 <header> 元素，而<h1> 成为内部容器。由于宽度必须相同，因此可以使用自定义属性来控制二者的大小。按如下代码更新样式：

代码清单 3.3 双容器样式

css 复制代码

:root {
  --brand-color: #0072b0;
  --column-width: 1080px;
}
.page-header h1 {
  max-width: var(--column-width); /* 设置最大宽度 1080px */
  margin: 0 auto;  /* auto 会让左右外边距自动填充可用空间，从而使元素在外容器内居中 */
}
.container {
  max-width: var(--column-width); /* 设置最大宽度 1080px */
  margin: 0 auto;
}

通过设置左右外边距为 auto，外边距将根据需要自动扩展，以填充外部容器中可用的剩余宽度。这通常是设置内容块水平居中的最简单的方法。但需要注意的是，在常规文档流中，这种做法对上下边距无效。

使用最大宽度 max-width 来代替宽度 width，可以让元素在屏幕视口窄于 1080px 时同步缩小至 1080px 以下。也就是说，在较小的视口中，内部容器将填满屏幕；而在较大的视口中，它只能最大扩展到 1080px。这样的设计对于避免在尺寸较小的设备上横向滚动屏幕至关重要。本章后续内容将详细介绍 max-width 及其相关属性（properties）。

（因篇幅较长，本节未完待续。下一篇介绍：逻辑属性及其用法，敬请期待！）

【CSS in Depth 2 精译】第三章 文档流与盒模型 + 3.1 常规文档流

第三章 文档流与盒模型

3.1 常规文档流

3.1.1 内容水平居中

【CSS in Depth 2 精译】第三章文档流与盒模型 + 3.1 常规文档流

第三章文档流与盒模型