重修 CSS（四）：盒模型之高度问题

接着来讨论盒模型。今天的内容依然来自书中第一部分《基础回顾》的第三章《盒模型》。我们将接着改进上次的网页。

内容溢出

高度和宽度是完全不同的两个问题。我们可以给一段文本设定宽度，而高度永远都会随着文本的长度而变化。因此，我们很少给元素指定一个具体的高度。我们称这种布局为“普通文档流”（normal flow）。

如果我们明确指定一个容器的高度，那内容可能会溢出容器。我们用 overflow 属性来控制溢出内容的行为：

• visible（默认值）：所有内容可见，即使溢出容器边缘
• hidden：溢出部分内容被裁剪，无法看见
• scroll：容器出现滚动条，有时还会出现水平方向的滚动条
• auto：只有溢出时才出现滚动条

等高列

高度不能用容器高度的百分比表示，因为外围容器的高度也依赖于内部元素的高度。如果想让一个容器填满屏幕，我们可以使用视口相对单位 vh。另一种更常见的办法是创建等高列，即扩展较矮的列，使其与较高列同高。

display: table;

一种常见的等高列方案是在外围容器上使用 display: table;：

.container {
  display: table;
  width: 100%;
}

然而这导致了 margin-left 失效。一种解决方案是使用 border-spacing 增加表格内部的间距。然而这样又会使表格外圈多出来一圈我们不需要的边距。我们可以再使用负外边距来抵消：

.wrapper {
  margin-left: -1.5em;
  margin-right: -1.5em;
}

.container {
  display: table;
  width: 100%;
  border-spacing: 1.5em 0;
}

display: flex;

另一种解决方案是使用 Flexbox。display: flex; 的容器是一个弹性容器（flex container），它的子元素默认等高，也可以给元素设置宽度和外边距，Flexbox 可以妥善处理。采用 Flexbox 的方案可以使代码非常简洁：

.container {
  display: flex;
}

.main {
  width: 70%;
  background-color: #fff;
  border-radius: .5em;
}

.sidebar {
  width: 30%;
  padding: 1.5em;
  margin-left: 1.5em;
  background-color: #fff;
  border-radius: .5em;
}

赏心悦目：

min-height 和 max-height

这两个属性可以决定容器的最小高度和最大高度。当高度超过 max-height 时，元素本身不再增高，内容将溢出。

垂直居中

块级元素不能够使用 vertical-align，它只能影响行内元素和 table-cell 元素。对行内元素，它控制元素和同一行内其他元素的对齐关系；对 table-cell，它控制单元格内内容的对齐。

最简单的方案是设置相同的 padding-top 和 padding-bottom。此外也可以使用 Flexbox。我们将在今后的章节中进一步讨论如何使用 Flexbox。

未完待续

下一篇笔记我们将会讨论盒模型中的一些其他内容。