前端常见问题梳理 - css布局二

本篇整理了如下下个问题

  • 使用css实现一个持续的动画效果
  • 右边宽度固定,左边自适应怎么布局?

使用css实现一个持续的动画效果

  • 要定义 @keyframes 和 animation
  • 兼容性要添加 @-webkit-keyframes rotateInfinite,

    @-webkit-: Safari 和 Chrome

    @-moz-: Firefox

    @-o-: Opera

  • 可以用百分比,也可以用 from to

#container{
width: 100px;
height: 100px;
background: red;
animation: rotateInfinite linear 2s infinite ;
}
@keyframes rotateInfinite {
    0%{
        transform: rotate(0deg);
    }
    50%{
        transform: rotate(180deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
@keyframes rotateInfinite {
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}

右边宽度固定,左边自适应怎么布局?

  • 1: 通过flex
  • 2:通过float+margin
  • 3:通过table

通过flex

#container{
    width: 300px;
    height: 200px;
    border: 1px solid red;
    display: flex;
}
#right{
    width: 50px;
    height: 150px;
    background: blue;
}
#left{
    background: yellow;
    flex: 1;
}

这种方式,自适应的部分高度是全高的

通过float 和margin

#container{
    width: 300px;
    height: 200px;
    border: 1px solid red;
}
#right{
    width: 50px;
    height: 150px;
    background: blue;
    float: right;
}
#left{
    background: yellow;
    height: 150px;
    margin-right: 50px;
}

这里布局的时候,right要放在left的前面。自适应的部分,高度需要自己设置,否则为0

通过display table

#container{
    width: 300px;
    height: 200px;
    border: 1px solid red;
    display: table;
}
#right{
    width: 50px;
    height: 150px;
    background: blue;
}
#left{
    background: yellow;
    height: 150px;
    display: table-cell;
    width: 1000000px;
}

这种方式,left必须设置宽,而且宽要非常大。然后才能通过table的特性将宽适应回来,否则宽为0

感觉很奇怪,一般没用过这种方式

随机浏览