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。

未完待续

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

You’ve successfully subscribed to Skyward
Welcome back! You’ve successfully signed in.
Great! You’ve successfully signed up.
Your link has expired
Success! Check your email for magic link to sign-in.