CSS水平/垂直居中样式+CSS绘图与动画总结

居中

1.最简单的最常规的 "设置宽度自动margin"

.div1{
    width: 300px;
    margin: auto;
    height: 20px;
    background: red;
}

2.flex居中 可以上下居中

body,html{
    background: #ddd;
    height: 100%;
}
.container{
    height: 100%;/*容器必须要有高度*/
    display: flex;/*设置flex显示方式*/
    justify-content: center;/*垂直方向居中*/
    align-items: center;/*水平方向居中*/
    flex-direction:column;/*柱状竖直排列*/
}
.box{
    width: 300px;
    height: 20px;
    background: red;
    display: flex;
    margin: 20px;
}

3.flex栅格

.container{
    height: 100%;/*给一个固定高度好看效果,实际可以让高度自适应*/
    display: flex;/*设置flex显示方式*/
    flex-direction:column;/*柱状竖直排列*/
    /*flex-direction:row;/*横向排列*/
    /*flex-flow: column;*/
}

.container div{
    display: flex;
}
.box1{
    flex: 2;
    background:orange;
}

.box2{
    flex: 6;
    background: gray;
}

.box3{
    flex: 2;
    background:orange;
}

这个flex-flow与flex-direction是一样的吗？
参考

---

绘图

三角形,梯形

其实这种绘图就是让border变粗,然后交错的地方会互相叠加

Paste_Image.png

#div{
width: 0px;
 height: 0px;
 border-left: 45px solid gold;
 border-right: 32px solid green;
 border-bottom: 45px solid red;
 border-top: 45px solid blue;
}

修改一下宽或者高,就会形成梯形

Paste_Image.png

#div{
width: 0px;
 height: 35px;
 border-left: 45px solid gold;
 border-right: 32px solid green;
 border-bottom: 45px solid red;
 border-top: 45px solid blue;
}

圆形

圆形很简单,就是把普通带边框的div加上一个50%的圆角

#div{
    width: 30px;
    height: 50px;
    border: 1px solid black;
    border-radius: 50%;
}

额外的一大堆想都想不到的绘图

---

动画

简单动画,常用的动画,比如hover以后变长,变色,开发用到这样就差不多了

#div1 {
    width: 100px;
    height: 100px;
    background: blue;
    transition-property: background,width,transform;
    transition-duration:  0.5s;
    transition-timing-function:linear;
}
#div1:hover {
    width: 200px;
    background: red;
    transition-property: background,width,transform;
    transition-duration: 0.5s;
    transition-timing-function:linear;
    transform:rotate(225deg);
}

补上一个简单的动画库可以快速做一些特效

用法也超简单

复杂动画

项目中从来没有用到过,不是很重要 待日后补充