top: 0 和 bottom: 0 通过“父容器内容高度 − top值 − bottom值”反推子元素高度；前提是父容器有可计算高度（如固定height、flex/grid布局或内容撑开），且已设position: relative等非static定位上下文。
top: 0 和 bottom: 0 是怎么算出高度的
它不是“设置高度”，而是告诉浏览器：“这个元素的上边界紧贴父容器内容区顶部，下边界紧贴父容器内容区底部”——浏览器据此反推高度：「父容器内容高度 − 上偏移 − 下偏移」。只要父容器有确定的内容高度（比如 height: 400px、min-height: 100vh，或被 flex / grid 约束出高度），这个差值就是子元素的实际高度。
为什么有时候写了 top: 0; bottom: 0 却没效果
最常见原因是父容器高度不可计算：
- 父元素
position是static（默认值），没设relative/absolute/fixed，导致子元素找不到定位上下文，top/bottom被忽略 - 父元素
height: auto且内部没有非绝对定位的内容撑高，此时“可用高度”为 0，top: 0; bottom: 0拉出来的仍是 0 - 误加了
height: 100%或max-height，它们会覆盖top/bottom的约束行为 - 父元素有
padding，但top: 0; bottom: 0是相对于 content box 计算的，不会自动避开 padding 区域
left: 0 和 right: 0 要不要一起写
取决于你要不要水平填满：
- 只写
top: 0; bottom: 0→ 垂直拉满，宽度仍按内容或auto计算 - 要真正“贴满父容器”，必须四边都写：
top: 0; right: 0; bottom: 0; left: 0 - 现代写法可用
inset: 0替代，语义更清晰，但 IE 和部分旧版 Safari 不支持
和 height: 100% 的本质区别在哪
height: 100% 是继承父元素的 height 属性值；top: 0; bottom: 0 是对父容器内容区进行双向约束求解。关键差异在于：
- 前者依赖父元素
height是否为明确数值（不能是auto） - 后者依赖父容器是否形成“可测量的高度上下文”，哪怕这个高度来自
flex的align-items: stretch或grid的1fr - 前者在嵌套多层百分比时容易断裂（比如父是
height: 50%，子再写100%就只剩 25%）；后者只要每层父容器都有高度上下文，就始终拉满当前层
真正卡住的往往不是代码漏没漏分号，而是你盯着子元素调样式时，忘了检查父元素有没有 position: relative，以及它的高度到底是怎么来的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
