推荐使用嵌套容器结构：外层div包含.star-bg（浅灰五星）和.star-fill（亮黄五星），后者设display:inline-block、overflow:hidden并用width百分比裁剪，如3.7星则width:74%，需配合固定.star-bg宽度或ch单位控制总宽，同时添加aria属性保障可访问性。
星级评分的HTML结构怎么写才方便用width控制
必须用嵌套容器分离“背景星”和“前景星”，否则width无法精准裁剪显示比例。常见错误是直接给<i></i>或<span></span>设width，但内联元素不支持宽高，会失效。
推荐结构：<div class="star-rating">
<div class="star-bg"><span>★★★★★</span></div>
<div class="star-fill"><span>★★★★★</span></div>
</div>。其中.star-bg设颜色浅灰，.star-fill设亮黄，并用overflow: hidden包裹，靠内部width百分比裁剪亮星部分。
-
.star-fill需设display: inline-block，否则width无效 - 两层
<span></span>里的五星字符必须完全一致，字体、字号、间距统一 - 避免用图标字体（如Font Awesome）直接套
width——字符宽度不均，5颗星总宽难精确匹配100%
CSS中width百分比怎么算才准
5颗星对应100%，所以每颗星占20%。要显示3.7颗星，就设width: 74%（3.7 × 20%）。关键点在于：这个百分比是相对于.star-fill父容器（即.star-bg）的宽度，而后者必须固定为5颗星的总宽。
因此.star-bg需显式设width（如width: 100px），或用font-size配合ch单位控制——比如font-size: 20px时，一个★约1.2ch宽，5颗≈6ch，可设width: 6ch。
- 用
ch单位比像素更适配字体缩放，但需测试不同字体下★的宽度是否稳定 - 若用
rem/em，确保根字体大小未被重置，否则计算偏移 - 不要对
.star-fill span设width，而要对其父.star-fill设——否则文字换行或基线错位
动态更新评分时width怎么同步更新
JavaScript只需修改.star-fill元素的style.width，无需重绘DOM。例如评分3.2，执行el.style.width = (3.2 * 20) + '%'即可。
注意边界值处理：0分要设0%，5分要设100%，避免小数导致四舍五入出界（如5.0001 → 100.002%，溢出）。
- 建议用
Math.min(Math.max(score * 20, 0), 100)兜底 - 若用CSS变量（
--rating），可用calc(var(--rating) * 0.2 * 100%)，但兼容性要求Chrome 85+/Firefox 91+ - 动画过渡加
transition: width 0.3s ease在.star-fill上，别加在span里
移动端适配和可访问性容易漏掉什么
纯视觉的width裁剪对屏幕阅读器不可见，必须补aria-valuenow和aria-valuemin/aria-valuemax。否则视障用户只能听到“五星图标”，不知道当前是3.7分。
另外，font-size随设备缩放时，ch单位可能失准，iOS Safari对ch支持较弱，稳妥做法是用max-width限制容器，再配合vw动态缩放字体。
- 给
.star-rating加role="img"并配aria-label="评分：3.7分（满分5分）" - 避免用
transform: scaleX()替代width——它会镜像文字，且影响焦点框渲染 - 深色模式下，检查亮黄色
.star-fill在暗背景中对比度是否≥4.5:1
实际项目里最常卡住的地方，是忘了给.star-fill设overflow: hidden，或者用inline元素硬套width。这两个点一错，整个百分比就失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
