css学习

定位position（static、relative、fixed、absolute）

1. static（默认值）或者未设 position 属性，top, bottom, left, right 和 z-index不会起作用
2. relative （相对定位）其在文本流中的位置依然存在。 相对于其正常位置进行定位。
3. absolute （绝对定位）其在正常流中的位置不再存在
   当没有left、right、top、bottom时，会和static的效果一样
   否则 相对于其最接近的一个具有定位属性的父元素进行绝对定位，若不存在有定位的父元素则是相对于body==元素
4. fixed 生成（固定定位）的元素，该元素相对于浏览器窗口进行定位。
   固定定位的元素不会随浏览器窗口的滚动条滚动而变化，也不会受文档流动影响，而是始终位于浏览器窗口内视图的某个位置。
   （https://www.cnblogs.com/theWayToAce/p/5264436.html）

显示display

1. none
   隐藏元素（不会在文档流中）
   visibility：hidden;（还在在文档流中）
2. block
   默认宽度时其容器的100%（<p><div><h1><li>）
3. inline
   只能设置左右的margin值和左右的padding值，其高度一般由其字体的大小来决定，其宽度由内容的长度控制，通过line-height，font-size，vertical-align撑开（<a><em><img>）
4. inline-block
   不支持margin：auto，width、height、margin、padding
5. inherit
   规定应该从父元素继承 display 属性的值。
6. flex flex块级，
7. inline-flex 行内快

justify-content:space-around;
/*center:水平居中,flex-start:靠左;flex-end:靠右；space-between:两边的向两边靠，中间等分；space-around:完美的平均分配*/

align-items:stretch;
/*center:垂直居中、flex-start：至顶、flex-end:至底、space-between、space-around、stretch伸缩项目填充整个容器，默认值*/　　

flex-direction: row;
/*column从上向下的排列，column-reverse、row:从左到右，row-reverse:从右向左*/

flex-wrap:wrap;
/*wrap多行显示（父容器不够显示的时候，从上到下）、nowrap(当容器不够宽的时候，子元素会平分父容器的宽或者高)、wrap-reverse:从下向上*/

flex-flow:row wrap/*是flex-direction、flex-wrap的缩写*/

（http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool）

水平居中方法

/* 方法一 */
.Login {
    width: 500px;
    height: 300px;
    background-color: rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    position: relative;
    border-radius: 15px;
    box-shadow: 0px 0px 20px #888;
    /* text-align: center; */
}
/* 方法二 */
.test {
    width: 100%;
    height: 3rem;
    /* text-align: center; */
    display: flex;
    justify-content: center;
}
/* 方法三 */
.test{
    /* position: absolute;不能是这个属性 */
    margin: auto;
}

动画

参数

属性	描述
@keyframes	规定动画。
animation	所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name	规定 @keyframes 动画的名称。
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function	规定动画的速度曲线。默认是 “ease”。
animation-delay	规定动画何时开始。默认是 0。
animation-iteration-count	规定动画被播放的次数。默认是 1。
animation-direction	规定动画是否在下一周期逆向地播放。默认是 “normal”。
animation-play-state	规定动画是否正在运行或暂停。默认是 “running”。
animation-fill-mode	规定对象动画时间之外的状态。

旋转例子

/* css文件 */
.animation {
    animation: mymove 3s linear infinite;
    -webkit-animation: mymove 3s linear infinite;
}
.notAnimation {
    animation-play-state:paused;
    -webkit-animation-play-state:paused;
}
.isAnimation {
    animation-play-state:running;
    -webkit-animation-play-state:running;
}
/* Firefox */
    /* @-moz-keyframes   */
/* Safari 和 Chrome */
    /* @-webkit-keyframes  */
/* Opera */
    /* @-o-keyframes  */
@keyframes mymove {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}
 /*或者这个，适合线性 */
@keyframes mymove {
    0% {-webkit-transform: rotate(0deg);}
    50% {-webkit-transform: rotate(180deg);}
    100% {-webkit-transform: rotate(360deg);}
}

// div
:class="[Animation?'isAnimation':'notAnimation','animation']"
// data
Animation:true
// methods → function
this.Animation = !this.Animation