top和bottom同时设置且height为auto时，仅对absolute/fixed/sticky元素触发垂直拉伸：height=包含块高度−top−bottom；relative下bottom被忽略，仅top生效。
因为 top 和 bottom 同时设置（且 height 未显式指定或为 auto）会触发浏览器的垂直拉伸计算逻辑，它直接覆盖默认的 height: auto 行为，把盒模型高度从“由内容撑开”变成“由包含块高度减去偏移推导得出”。
top + bottom 触发 height 拉伸计算
这个行为只在 position: absolute、fixed 或 sticky 元素上生效。当同时设置了非 auto 的 top 和 bottom（例如 top: 20px; bottom: 20px;），且没有写 height 或写的是 height: auto，浏览器就会执行：
height = 包含块高度 − top值 − bottom值
这不是“居中”，也不是“对齐”，而是强制尺寸推导——和 left/right 拉伸宽度是同一套机制。
- 这个计算结果是内容区高度，
padding和border会额外叠加（除非用了box-sizing: border-box） -
margin完全不参与该计算，只影响元素最终位置 - 如果包含块高度为
auto（比如父容器没设高），那算出来就是0或不可预期值
relative 下写 top + bottom 是无效的
position: relative 元素不会触发拉伸逻辑。CSS 规范强制规定：当 top 和 bottom 同时存在时，bottom 被忽略，仅 top 生效；同理，left 和 right 同时存在时，right 被忽略。
- 这不是优先级问题，跟 class 顺序、
!important都无关 - 误写
position: relative; top: 10px; bottom: 10px;，只会看到向上偏移 10px - 想让
relative元素“撑满”，得靠内容、显式height，或改用flex/grid
拉伸失效的真正原因：包含块高度不可计算
很多人以为写了 top: 20px; bottom: 20px; 就能自动填满空间，但实际效果完全取决于包含块是否提供可测量的高度基准。
- 父容器是
position: relative，但没设height、min-height或被flex/grid约束 → 包含块高度为auto→ 拉伸失败 - 父容器自身也是
absolute，而它的包含块高度为auto→ 连锁塌陷 - 父容器仅靠子元素撑高，但所有子元素都是
absolute→ 父容器高度坍缩为0 - 用
vh单位时，在 iOS Safari 中因地址栏显示/隐藏导致视口高度跳变 →getBoundingClientRect().height可能返回0
box-sizing 和 margin 会叠加在拉伸结果上
拉伸计算出的 height 是内容区高度，padding 和 border 不会被自动扣除。
-
box-sizing: content-box（默认）：最终占位 = 计算高度 +padding × 2+border × 2 -
box-sizing: border-box：最终占位 = 计算高度，内容区被压缩 -
margin不参与拉伸，但会外推元素，可能造成视觉溢出或遮挡 - 全局重置
* { box-sizing: border-box; }能大幅降低意外
真正起作用的从来不是“写了两个方向”，而是“定位类型 + 包含块是否提供可计算的高度基准”。漏掉任意一环，top 和 bottom 就只是两个安静的无效声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
