重修 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。
未完待续
下一篇笔记我们将会讨论盒模型中的一些其他内容。