width属性控制水平线的横向长度，以像素或百分比表示；size属性控制其垂直厚度（粗细），单位为像素；二者在html5中均已废弃，应改用css的width和height替代。
width 属性控制的是水平线的宽度，不是高度
很多人看到 width 就默认是“宽高”里的“宽”，但用在 <hr> 上容易误判方向：它实际控制的是水平线**横向铺开的长度**，即从左到右占多少空间。默认是 100%，撑满父容器；设成 width="200px" 就固定 200 像素长，居中显示。
常见错误现象：
- 写了
width="50"却没生效 → 缺少单位，应为width="50px"或width="50%" - 设了
width="80%"但看起来没变 → 父容器本身很窄，或被其他 CSS（如max-width）限制了 - 和
size混用时以为width也影响粗细 → 完全无关，width只管“多长”，不管“多粗”
size 属性控制的是水平线的厚度（高度），单位是像素
size 是传统 HTML 中控制 <hr> “粗细”的属性，值为纯数字，单位隐含为像素。比如 size="4" 表示线高 4px；size="1" 是最细的默认值。
注意点：
-
size="10"不等于style="height: 10px"—— 后者是 CSS 高度，前者是旧式渲染逻辑，两者在部分浏览器中视觉表现不完全一致 - 设
size="0"不会隐藏线，而是退回到默认值（通常是 2） - 若同时用了
size和style="height: ..."，CSS 优先级更高，但旧版 IE 可能忽略 CSS
WIDTH 和 SIZE 都已被 HTML5 废弃，该用 CSS 替代
虽然 width 和 size 在 Chrome/Firefox/Edge 中仍能工作，但它们在 HTML5 标准里已**不被允许**，W3C 明确要求用 CSS 控制样式。
等效替换方式：
-
<hr width="60%">→<hr style="width: 60%"> -
<hr size="3">→<hr style="height: 3px">（注意：必须带单位） - 想让线更细且无阴影：
<hr style="height: 1px; background: #ccc; border: none">（因为默认<hr>有 3D 阴影边框，仅设height不够）
兼容性影响：用内联 style 写法，所有现代浏览器都支持；但若项目需通过 HTML5 验证（比如用 W3C Validator），含 width 或 size 的标签会直接报错。
实际布局中容易被忽略的细节
单纯调 width 或 size 往往不够，因为 <hr> 默认是块级元素，自带上下 margin，且在 Flex/Grid 容器中行为可能异常。
几个关键细节：
-
<hr>的 margin 默认不为 0，常导致上下空隙比预期大 → 建议统一重置：margin: 0.5em auto - 设
width: 50%后发现没居中 → 检查是否父容器没设置text-align: center，或用了display: flex但没配justify-content - 想做虚线或渐变线 →
width/size完全不支持，必须用 CSS：border: none; background: linear-gradient(...); height: 2px
真正要用好 <hr>，得把它当普通块元素来处理，而不是依赖过时的 presentational 属性。
