Beyond awesome | 越而胜己

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

内容溢出

高度和宽度是完全不同的两个问题。我们可以给一段文本设定宽度,而高度永远都会随着文本的长度而变化。因此,我们很少给元素指定一个具体的高度。我们称这种布局为“普通文档流”(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-heightmax-height

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

垂直居中

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

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

未完待续

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