css 百分比 柱状图

CSS的百分比单位不仅可以用来设置元素尺寸，还可以用来制作柱状图。柱状图是一种直观明了的数据展示方式，可以清晰地表达数据的趋势和差异。

/* HTML结构 */div class="bar-chart">
    div class="bar-item" data-value="50">
    50%/div>
    div class="bar-item" data-value="80">
    80%/div>
    div class="bar-item" data-value="20">
    20%/div>
    div class="bar-item" data-value="45">
    45%/div>
    /div>
/* CSS样式 */.bar-chart {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 200px;
}
.bar-item {
    width: 20%;
    background-color: #0077cc;
    text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 20px;
    transition: height .5s ease;
}
.bar-item:hover {
    height: 100%;
}
    

上面的代码实现了一个简单的柱状图，通过设置.flex布局让柱子横向排列。每个柱子的宽度都设置为20%，高度根据对应数据值进行百分比计算。hover时通过transition实现动画效果，显示柱子的完整高度。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！