CSS中fg的进度条 |css 怎么解决父级标签塌陷

/* CSS代码 */
.progress {
width: 100%;
height: 10px;
background: #ddd;
border-radius: 5px;
overflow: hidden;
}
.progress-bar {
width: 0%;
height: 100%;
background: #67C23A;
border-radius: 5px;
transition: width 0.5s ease-in-out;
}
.progress:hover .progress-bar {
width: 100%;
}

上面的CSS代码中，大家定义了进度条的样式。进度条主要包括两个元素，分别是`.progress`和`.progress-bar`。`.progress`表示整个进度条的外层容器，其中，`width`表示进度条的宽度，`height`表示进度条的高度。`background`属性定义了进度条的背景颜色，`border-radius`属性定义了进度条边框的圆角度数。而`overflow:hidden`表示当进度条超出范围时，会隐藏超出部分。

而`.progress-bar`是进度条的内层容器，`width`定义了进度条内部的宽度，也就是任务进度所占比例。初始值为0%，`height`表示进度条内部的高度，`background`属性表示进度条内部的颜色。`border-radius`属性和`.progress`中的含义类似，也是定义边框的圆角程度。而`transition`属性则表示进度条发生变化时，会有一个过渡的效果。进度条产生变化时，进度条内部的宽度（即任务进度百分比）将从原来的0%渐变到目标数值。

在CSS中，大家还希望能够实现进度条的交互效果。这时，大家可以使用`:hover`伪类来实现鼠标悬浮到进度条上时，进度条会自动变成100%。