cs3/h5

一、

　　1.动画 transition

　　 　　transition-duration: 311ms 动画持续的时间

　　　　 transform: translate(300px, 0px) translateZ(0px)  

　　可用js 控制transition属性来实现动画

　　2.模糊

　　

/* FireFox, Chrome, Opera */  
    -webkit-filter: blur(3px);  
 /* Chrome, Opera */  
    -moz-filter: blur(3px);  
    -ms-filter: blur(3px);  
    filter: blur(3px);  
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=2, MakeShadow=false); 

　　给body的标签（标签的字，图片）添加模糊效果，常用于模态框的遮罩

　　3.margin

　　一个div只加margin-left 不设置宽度，那么div的内容宽度为父盒子宽度减margin-left宽度

　　4.position: fixed

　　right: 0;
　　left: 0;

　　相当于父盒子的100%

     5.display:table-cell;

　　　text-align:center; vertical-align:middle;height:100px;width:100px

　　垂直水平居中

　6.vertical-align:middle

　　要垂直对齐父盒子A中的子盒子B，代码如下：

　　

#A::before{
            content: "";
            display: inline-block;
            height: 100%;
            vertical-align: middle;
}
#B {
            display: inline-block;
            position: relative;
            vertical-align: middle;
            z-index: 2;
}

 　　方法2

    display: flex;
    align-items: center;