必须用 hr 而不是 border-bottom，因为 hr 具有“主题分隔”的语义，被浏览器、屏幕阅读器和搜索引擎识别为内容逻辑断点；而 border-bottom 仅为视觉装饰，无语义、不可聚焦、不可访问，且需额外处理间距与样式重置。
hr 标签是唯一语义正确、浏览器原生支持、且对屏幕阅读器友好的水平分割线实现方式。别用 div + border-bottom 临时凑合，除非你明确放弃语义和可访问性。
为什么必须用 hr 而不是 border-bottom
用 hr 是因为它的语义是“主题分隔”——浏览器和辅助技术（比如读屏软件）会把它理解为内容逻辑的断点；而 border-bottom 只是视觉装饰，没有任何语义含义。
- 搜索引擎和无障碍检测工具会识别
hr的结构作用，忽略纯 CSS 边框 - 在键盘导航中，
hr可被聚焦（尤其加了tabindex="0"时），border-bottom完全不可交互也不可感知 -
hr默认有上下 margin，天然留出呼吸空间；border-bottom需手动调padding或margin，否则文字紧贴线条
hr 样式必须重置 border 才能可靠控制
几乎所有浏览器给 hr 设了默认 border（比如 border: 1px inset），直接改 height 或 background-color 会失效或表现不一致。
- 第一步永远是写
border: none或border: 0，否则其他样式可能被覆盖 - 想用纯色线：配
height+background-color，例如height: 2px; background: #555; - 想要虚线：用
border-top: 1px dashed #999，别碰height（虚线高度由border决定） - 渐变线必须用
background: linear-gradient(...)，且height得设够（至少4px），否则渐变被截断
响应式场景下 width 和 margin 的坑
hr 默认宽度是 100%，但直接写 width: 80% 不代表它会居中——必须配合 margin: auto 或 margin: 0 auto。
- 写成
width: 80%; margin: 20px auto;才能居中并控制上下间距 - 在 flex 或 grid 容器里，
hr可能被拉伸或压缩，加align-self: center更稳妥 - 移动端小屏上，
width: 90%比固定像素更安全；避免用max-width却忘了设width，否则它仍会撑满父容器
真正容易被忽略的是：哪怕只改一个颜色，也得先清掉浏览器默认 border。没这一步，所有后续样式都可能白调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
