当前内容所在位置（可进入专栏查看其他译好的章节内容）
- 第一章 层叠、优先级与继承（已完结）
- 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 控制溢出行为
当元素高度被设为一个固定值，内容就可能 溢出（overflowing） 容器。当内容在限定区域放不下而被迫渲染到父元素外面时，就会发生这种现象，如图 3.10 所示。文档流不考虑溢出的情况，容器后面的所有内容都会渲染到溢出内容的上面（译注：原书这里并没有配图，源代码中也没有相应页面，因此我手动补了一个截图 3.10.1，以方便理解）。
图 3.10 内容溢出了容器
图 3.10.1 容器后续内容渲染到溢出内容的上方示意图
用 overflow 属性可以控制溢出内容的行为，该属性支持以下 5 个值：
visible（默认值）—— 所有内容都可见，即使溢出容器边缘。hidden—— 溢出容器内边距边缘的内容将被裁剪而不可见；用户也无法通过正常滚动看到这些内容，但仍能通过 JavaScript 编程的方式来滚动该元素。clip—— 类似于hidden，但通过编程实现滚动的方式也被禁用了。scroll—— 容器出现滚动条，用户可以滚动查看剩余内容。在某些操作系统中，即便内容都可见，也会出现水平和垂直两种滚动条，只是在这种情况下滚动条会被禁用（置灰）。auto—— 仅在内容溢出容器时出现滚动条。
图 3.11 展示了内容溢出时四种 overflow 取值下的容器渲染情况。
图 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 的效果对比
如果要在容器上设置高度 height，大多数情况下我都会改用 min-height。这样做往往就不必为后续的溢出问题伤脑筋了。
相应地，属性 max-height 则会让元素尺寸自然增大到某个值，一旦达到该值，元素就不再升高，其内容也将随之溢出。类似的属性还有 min-width 和 max-width（以及 min-inline-size 和 max-inline-size），用于限定元素的宽度。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
