【CSS in Depth 2 精译_020】3.3 元素的高度

news2024/9/21 20:29:25

当前内容所在位置（可进入专栏查看其他译好的章节内容）

第一章层叠、优先级与继承（已完结）
1.1 层叠
1.2 继承
1.3 特殊值
1.4 简写属性
1.5 CSS 渐进式增强技术
1.6 本章小结

第二章相对单位（已完结）
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 用好逻辑属性的简写形式

3.2 盒模型（已完结）
3.2.1 避免使用魔数
3.2.2 调整盒模型
3.3.3 全局设置 border-box

3.3 元素的高度 ✔️
3.3.1 控制溢出行为 ✔️
3.3.2 百分比高度的备选方案 ✔️
3.3.3 使用 min-height 和 max-height ✔️

3.4 负的外边距（精译中 ⏳）

文章目录

- 3.3 元素的高度
- - 3.3.1 控制溢出行为
  - 3.3.2 百分比高度的备选方案
  - 3.3.3 使用 min-height 和 max-height

3.3 元素的高度

元素的高度（即块的尺寸）处理起来可能会比较麻烦。按照常规流的设计，宽度是受限的，而高度则不受限。因此，容器的高度是由其内容天然决定的，而非容器自身决定。通常情况下，最好避免给元素（尤其对包含大量内容的元素）设置确切的高度，尽管时常会有这样的冲动。

3.3.1 控制溢出行为

当元素高度被设为一个固定值，内容就可能 溢出（overflowing） 容器。当内容在限定区域放不下而被迫渲染到父元素外面时，就会发生这种现象，如图 3.10 所示。文档流不考虑溢出的情况，容器后面的所有内容都会渲染到溢出内容的上面（译注：原书这里并没有配图，源代码中也没有相应页面，因此我手动补了一个截图 3.10.1，以方便理解）。

图 3.10 内容溢出了容器

图 3.10 内容溢出了容器

图 3.10.1 容器后续内容渲染到溢出内容的上方示意图

图 3.10.1 容器后续内容渲染到溢出内容的上方示意图

用 overflow 属性可以控制溢出内容的行为，该属性支持以下 5 个值：

visible（默认值）—— 所有内容都可见，即使溢出容器边缘。
hidden —— 溢出容器内边距边缘的内容将被裁剪而不可见；用户也无法通过正常滚动看到这些内容，但仍能通过 JavaScript 编程的方式来滚动该元素。
clip —— 类似于 hidden ，但通过编程实现滚动的方式也被禁用了。
scroll —— 容器出现滚动条，用户可以滚动查看剩余内容。在某些操作系统中，即便内容都可见，也会出现水平和垂直两种滚动条，只是在这种情况下滚动条会被禁用（置灰）。
auto —— 仅在内容溢出容器时出现滚动条。

图 3.11 展示了内容溢出时四种 overflow 取值下的容器渲染情况。

图 3.11 从左至右 overflow 取值分别为 visible、hidden、scroll、auto 的对比效果

图 3.11 从左至右 overflow 取值分别为 visible、hidden、scroll、auto 的对比效果

通常情况下，我更倾向使用 auto 而非 scroll，因为在大多数情况下，我并不想让滚动条一直出现，除非万不得已。

水平方向的溢出

除了垂直溢出，内容也可能在水平方向溢出。比如，当在一个很窄的容器中放入一条很长的 URL 地址；或者在一个小型移动设备上查看一个包含很多列的表格的时候。此时适用的溢出规则与垂直溢出时一致。

也可以使用 overflow-x 属性单独控制水平方向的溢出，或者用 overflow-y 来控制垂直溢出。这些属性都支持 overflow 的所有值。但若将 x 和 y 方向显式声明为不同的取值时，一旦其中一个为 hidden，往往会产生不可预知的效果；在这种情况下，应该改用 clip。

使用滚动条时务须谨慎。浏览器已经自带一个滚动条来滚动页面，如果网页内部再嵌套多个滚动区，用户体验可能会很糟糕。如果用户使用鼠标滚轮向下滚动页面，当鼠标到达一个较小的滚动区，滚轮就会停止滚动页面，转而去滚动较小的区域。

3.3.2 百分比高度的备选方案

用百分比来指定高度也有问题。百分比参考的是元素包含块（containing block）的大小，而容器的高度通常是由子元素的高度决定的。这样就产生了循环定义（circular definition），浏览器没法解析，从而会忽略该声明。想让百分比高度生效，就必须给父元素一个确切的高度。

百分比高度的一个有效应用场景是用在绝对定位的元素上，此时元素的尺寸与其容器息息相关。本书后续章节会专门介绍定位相关的知识。

开发者往往会在下面两个应用场景中，因为尝试百分比高度而陷入困境：

第一个场景，是想让容器填满整个屏幕。这时可能需要将 height: 100% 给到某个元素，进而到其容器，并沿着 DOM 树一直向上，直到将它应用到 <body> 和 <html> 元素。其实更好的方案是使用视口相对单位（viewport-relative units，相关内容第二章已有论述），因为此时无非是想要一个 100svh/lvh 的高度效果。

第二个应用场景，是需要创建等高列的时候。页面设计往往需要两个或多个元素并排且具有相同的高度。而让一个元素的尺寸去参照同级别相邻元素的做法，在 CSS 的历史上是一件非常棘手的事。要实现这一需求，以前需要一些非常取巧的手段；而如今只要应用更现代的技术就能轻松搞定。在后续介绍 flexbox 弹性盒布局和 grid 网格布局的相关章节中，我们将一探究竟。

3.3.3 使用 min-height 和 max-height

min-height 与 max-height（以及对应的逻辑属性 min-block-size 与 max-block-size）是两个非常有用的属性（properties）。通过这两个属性设置一个最小或最大值，就能让元素在给定范围内缩放自如，不用再显式定义高度了。

如果要将一张大图放在一大段文字后面，但又担心图片溢出容器，就可以用 min-height 给容器设置一个最小高度，而不必指定确切的高度。这么一来，该容器的高度最小也不会低于设定的值；要是内容过多，浏览器则会让其高度自然升高，以免内容溢出。

如图 3.12 所示的三个元素，左侧的元素没有设置 min-height，因此高度是由内容自然决定的；其余两个元素的 min-height 均设为 3em。对于中间的元素，自然高度虽然不足 3em，但 min-height 将其补到了 3em；而右边的元素内容够多，其高度已然超过了 3em，此时容器则会自然升高来容纳它们。

图 3.12 三个元素、一个没有指定高度、另两个设置了 min-height 为 3em 的效果对比