用div嵌套+width百分比实现进度条，本质是父容器限制范围、子容器用width表示完成比例；必须两层结构，外层设固定尺寸和overflow:hidden，内层设height:100%及动态width值。
用 div 嵌套 + width 百分比做进度条，本质是控制子容器宽度
这不是“画一条线”，而是靠父容器限制范围、子容器用 width 表示完成比例。关键在两层结构：外层固定尺寸和溢出隐藏，内层用百分比撑开——width: 65% 就是 65% 进度，不依赖 JS 也能静态展示。
常见错误是只写一个 div 加 width，结果进度条跑出容器、颜色错位、动画卡顿。必须嵌套，且父容器得加 overflow: hidden。
- 外层
div设固定宽高（如width: 300px; height: 8px），并加overflow: hidden - 内层
div设背景色、高度撑满（height: 100%），width动态改 - 别忘了设
box-sizing: border-box，否则边框或 padding 会撑破宽度
CSS 进度条的 width 值必须是数值型，不能用 calc() 或变量直接驱动
如果你打算用 CSS 自定义属性（比如 --progress: 72）配合 width: calc(var(--progress) * 1%)，多数浏览器不支持这种计算方式——calc() 里不能混用单位和无单位数，且 % 不是可运算单位。
真正能用的只有三种方式：
- 纯静态：直接写
width: 72% - JS 控制：修改元素的
style.width，如el.style.width = '72%' - CSS 变量 + JS 同步：JS 更新
style.setProperty('--progress, '72%')，CSS 里写width: var(--progress)
想用纯 CSS 实现“根据属性值自动算宽度”？做不到。CSS 没有运行时表达式求值能力。
加动画时，transition 必须作用在 width 上，且初始状态不能是 auto 或 unset
很多人加了 transition: width 0.3s ease 却没动画，原因往往是：内层 div 初始没设 width，浏览器按 auto 渲染，而 auto → 60% 无法插值过渡。
正确做法：
- 内层
div初始必须设明确宽度，如width: 0%或width: 10% -
transition写在内层选择器上，不是父层 - 避免用
max-width替代width做进度，它不触发重排动画，视觉上卡顿
另外，width 动画在低性能设备上可能掉帧，如果进度变化频繁（如上传实时反馈），建议改用 transform: scaleX() 配合 transform-origin: left，性能更好。
IE11 和旧版 Safari 对 width 百分比+动画的支持有边界问题
IE11 下，若父容器宽高由内容撑开（比如没设 width）、或用了 flex 布局，内层 width: 60% 可能失效；旧版 Safari（transition + width 的渲染有延迟，尤其从 0% 开始时第一帧常跳变。
兼容性兜底建议：
- 父容器务必设明确
width（哪怕width: 100%也行，但上级得有宽度约束） - 避免在
display: flex容器里直接放进度条，外层再包一层div并设display: block - IE11 用户量还不少的话，加一行
zoom: 1触发 hasLayout，有时能修复宽度塌陷
真正在意老浏览器，就别省那几行代码——多一层包裹、明确宽高、不用 fancy 技巧，比花式 hack 更稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
