用 border 设置实线边框最直接，需显式声明 solid（如 border: 1px solid #000），否则默认为 none；其伸缩性由 display 类型、box-sizing 和内容存在与否共同决定，空元素塌陷是主因。
用 border 设置实线边框是最直接的方式
HTML5 本身不提供“边框”语义，真正起作用的是 CSS 的 border 属性。想让边框是实线，必须显式写 solid，比如：border: 1px solid #000。漏掉 solid（例如只写 border: 1px #000）在多数浏览器里会退化为 none，边框直接消失——这是新手最常踩的坑。
实线边框默认就随内容伸缩：块级元素（如 div、p）宽度自适应内容+内边距+边框；行内元素（如 span）则紧贴文字，高度由行高和字体决定。不需要额外“隐藏法”来触发伸缩行为。
所谓“隐藏法”其实是误传，真正有用的是控制盒模型
有人提到“隐藏法”，可能混淆了 outline、box-shadow 或伪元素模拟边框的技巧，但这些都不是“让实线边框伸缩”的必要手段。真正影响伸缩表现的是 box-sizing：
-
box-sizing: content-box（默认）：width只算内容区，边框和内边距额外加出，容易撑破容器 -
box-sizing: border-box：width包含内容+内边距+边框，更符合“随内容自然伸缩”的直觉
推荐全局设置：* { box-sizing: border-box; }，避免布局意外溢出。
立即学习“前端免费学习笔记（深入）”；
内容为空时边框“消失”的原因和解法
如果一个 div 没有内容、没有 height、没有 padding，即使写了 border，它高度也会是 0，看起来像“边框不见了”。这不是边框失效，而是元素塌陷了。
常见应对方式（按场景选）：
- 加
min-height: 1px强制保留最小高度 - 加
padding: 1px（哪怕极小，也能撑开盒子） - 对空容器用
::before或::after插入零宽字符：content: "\200B" - 如果是文本容器，确保有空白符（如 ）或设置
white-space: pre
响应式下实线边框的缩放陷阱
用固定像素（如 border: 2px solid #333）在高清屏或缩放页面时可能显得过细或模糊。更稳健的做法：
- 用
border-width: 0.1rem（相对根字号，缩放时同步变化） - 媒体查询中分档调整：
@media (min-resolution: 2dppx) { border-width: 2px; } - 避免对
border-radius和border同时做复杂动画，某些浏览器会触发重绘异常
边框是否“随内容伸缩”，根本上取决于元素的 display 类型、盒模型和内容是否存在——不是靠什么隐藏技巧，而是理解这三者的交互。最容易被忽略的，是空内容 + 默认 box-sizing + 无最小尺寸约束，这三者叠在一起，会让实线边框彻底“隐身”。
