height: 0 时 border 仍能渲染，因为 border 绘制在 content-box 外围，不依赖内容高度；只要元素存在盒模型结构（非 display: none），border-box 就存在，border-width 会向外扩展形成三角形。
因为 height: 0 控制的是内容区域高度，而 border 是独立于内容区域绘制的——它不依赖内容存在，只要元素有盒模型结构，border 就能渲染。
height: 0 时 border 为什么还能画出来？
浏览器绘制 border 的前提是元素有「盒」，不是有「内容」。即使 height: 0、width: 0，只要元素没被 display: none 或彻底移除，它的 border-box 就依然存在。border 是绘制在 content-box 外围的，哪怕 content-box 高度为 0，border 仍按设定的 border-width 向外扩展。
常见误解是认为“没高度就没空间画边框”，但实际 border 占据的是「自身盒模型的外围」，和内容高度无关。
-
height: 0只让 content area 高度为 0，padding 和 border 仍按规则向外撑开 - 若同时设了
box-sizing: border-box，height: 0意味着 content height = 0，但 padding + border 仍计入总高 - border 渲染不依赖父容器高度，只依赖自身是否参与布局（例如
display: block）
border: 0 和 border: none 的行为差异
想真正让 border 不占空间、不渲染，必须用 border: none，而不是 border: 0。
-
border: 0→ 浏览器仍创建 border box，只是宽度为 0px，仍参与盒模型计算（比如影响box-sizing: border-box下的总尺寸） -
border: none→ 浏览器跳过 border 渲染逻辑，不分配内存，不参与任何盒模型计算 - 在
height: 0场景下，border: 0看似“消失”，但若搭配outline或调试工具检查，仍可能暴露 layout 影响
用 border 做三角形时 height: 0 是必需的
这是 border 可视化机制的正向利用：把宽高归零后，四条 border 在角上交汇形成斜线，每条 border 实际呈现为一个等腰直角三角形。
典型写法：
.arrow-down {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #333;
}
- 必须设
width: 0; height: 0，否则 border 会与 content area 共存，无法聚合成纯三角形 - 透明边框（
transparent）不是“隐藏”，而是让对应方向的三角形不可见，只留一个方向有色边框 - IE6 兼容写法需配合
border-style: dashed替代transparent，但现代项目基本无需考虑
真正容易被忽略的点是：border 的可见性与 height 完全解耦；你删不掉 border，靠的是重置它的样式（none），而不是压缩它的容器（height: 0）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
