前端笔试题整理（牛客网） | Silas's Blog

1. 请使用两种不同的CSS方法（要求dom结构不同）实现下图所示的条形图。从左到右的条形分别记为A,B,C,D,E。A的高度为30%，颜色为#f00；B的高度为50%，颜色为#ddd；C的高度为70%，颜色为#0fd；D的高度为50%，颜色为#ff0；E的高度为30%，颜色为#234，每个条形之间的距离可以任意设置（可以考虑使用CSS3新属性来实现）。

• 用margin方法来对齐底部

<div class="container">
    <div class="item item1"></div>
    <div class="item item2"></div>
    <div class="item item3"></div>
    <div class="item item4"></div>
    <div class="item item5"></div>
</div>
<style>
.container {
    height: 100px;
    width:200px;
    position: relative;
}
.item {
    width: 10px;
    position: absolute;
}
.item1 {
    height: 30%;
    top: 70%;
    background-color: #f00;
    left: 10px;
}
.item2 {
    height: 50%;
    top: 50%;
    background-color: #ddd;
    left: 30px;
}
.item3 {
    height: 70%;
    top: 30%;
    background-color: #0fd;
    left: 50px;
}
.item4 {
    height: 50%;
    top: 50%;
    background-color: #ff0;
    left: 70px;
}
.item5 {
    height: 30%;
    top: 70%;
    background-color: #234;
    left: 90px;
}
</style>

• 弹性盒子

<div class="container">
    <div class="flex-box"></div>
    <div class="flex-box"></div> 
    <div class="flex-box"></div> 
    <div class="flex-box"></div> 
    <div class="flex-box"></div> 
</div>
<style>
.container {
    width: 200px;
    height: 100px;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
}
.flex-box {
    width: 10px;
}
.flex-box:nth-child(1) {
    height: 30%;
    background-color: #f00;
}
.flex-box:nth-child(2) {
    height: 50%;
    background-color: #ddd;
}
.flex-box:nth-child(3) {
    height: 70%;
    background-color: #0fd;
}
.flex-box:nth-child(4) {
    height: 50%;
    background-color: #ff0;
}
.flex-box:nth-child(5) {
    height: 30%;
    background-color: #234;
}
</style>