hr的size属性已废弃，必须用border显式声明样式；正确写法是hr { border: 3px solid #666; }，同时设置宽度、样式和颜色；width属性也应改用css的width与margin组合控制长度和居中。
hr的size属性失效，必须用border显式声明样式
写了hr size="4"却没变粗？不是你代码写错，是现代浏览器压根不读这个属性。HTML5 已废弃 size，Chrome/Firefox/Safari 的 UA 样式表里根本没它。真正起作用的是 border，但必须同时指定 border-style，否则 border-width 会被忽略。
常见错误：
– hr { border-width: 3px; } ❌ 没效果，缺 border-style
– hr { border: 3px #666; } ❌ 缺样式关键字，浏览器当无效声明
– hr { height: 3px; background: #666; } ✅ 可行，但需配 border: none 清掉默认边框
最稳妥写法：hr { border: 3px solid #666; }
这条语句同时设置了宽度、样式和颜色，且所有现代浏览器一致支持。
width属性失效后，用CSS width + margin控制长度和居中
hr width="60%" 能用，但不合法——HTML5 验证会报错，且在 Flex/Grid 容器中行为不可控。改用 CSS 的 width 和 margin 组合更可靠。
关键点：
– width 只控制横向长度，不影响粗细
– 单独设 width: 60% 不会自动居中，必须加 margin: auto
– 父容器若为 display: flex，margin: auto 依然有效，但别依赖 text-align: center
– 响应式场景下，max-width: 600px 比固定 width 更安全，避免窄屏溢出
推荐写法：hr { width: 80%; max-width: 600px; margin: 1.5em auto; }
border和height混用容易导致高度计算错误
想用 height 控制粗细，又保留 border？小心盒模型陷阱。默认 hr 是 border-box 模式，height: 1px + border-top: 2px solid #000 实际占用高度是 3px（1 + 2），还可能因浏览器 UA 样式叠加出双线。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
两种清晰路径：
– 要精确高度（如 1px）：用 border: none; height: 1px; background: #ccc;
– 要带边框风格（如实线/虚线）：用 border: 0; border-top: 2px dashed #999;，不设 height
– 别写 border: 2px solid #000; height: 2px;，这会让总高度变成 4px+上下 margin
特别注意：border: 0 和 border: none 效果相同，但前者更短，也更常被用于重置。
响应式粗细不能靠size，得靠CSS单位和媒体查询
size="2" 是固定像素值，在高 DPI 屏或页面缩放 150% 时会显得过细；百分比写法 size="50" 也不被支持。真要适配，只能走 CSS。
可行方案：
– 用 em：粗细随父元素字号变化，border: 0.1em solid #999;
– 用 clamp()：限制范围，border: clamp(1px, 0.12em, 2px) solid #999;（IE 不支持）
– 用媒体查询最稳：@media (max-width: 768px) { hr { border-width: 1px; } }
– 别在 size 里写 em 或百分比——它只接受纯数字，且已被废弃
真正难的不是让线变粗，而是让粗细在不同设备、不同缩放、不同暗色模式下都稳定出现。盯住 border 没错，但必须带上 solid 或其它明确的 border-style。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
