常用CSS代码块

1.清除浮动

.clearfix:after {
 content:".";/*内容为小点，尽量不要空，否者旧版本浏览器有空隙*/
 display:block;
 height:0;
 visibility:hidden;/*隐藏盒子*/
 clear:both;
}


.clearfix {
 *zoom:1;/* *代表ie6/7能识别的特殊符号 zoom就是ie6/7清除浮动的方法*/
}

2.溢出文字隐藏

.overflow {
 white-space:nowrap;/*首先强制一行*/
 overflow:hidden;
 text-overflow:ellipsis;/*超出部分使用省略号*/
}

3.鼠标经过插入一个伪元素

.div {
 width:100px;
 height:100px;
 position:relative;/*子绝父相*/
}


.div:hover::before {
 content:"";
 width:100%;
 height:100%;
 border:10px solid rgba(255,255,255,.3);
 display:block;/*伪元素属于行内元素，需要转换*/
 position:absolute;
 top:0;
 left:0;
 box-sizing:border-box;/*把padding 和 border 都算入width里面*/
}

4.过渡动画

div {
  width:300px;
  height:100px;
  /*transition写在div中 而不是hover中*/
 /*transition: width 0.6s ease 0s,height 0.3s ease-in 1s;*/
 transition: all 0.6s;/*所有属性都变化，后面连个参数可省略*/
}
/*鼠标经过盒子，改变盒子大小*/
div:hover {
 width:600px;
 height:300px;
}

5.盒子居中对齐

div {
  width:200px;
  height:200px;
  background-color:pink;
  position:absplute;
  left:50%;
  top:50%;
  /*margin-left:100px; 需要计算不合适*/
  /*水平/垂直 移动自己宽度的一半*/
  transform:translate(-50%,-50%);
}

6.按中心点旋转

div {
  width:200px;
  height:200px;
  background-color:pink;
 transition:all 0.6s;
 /*transform-origin:top left; 设置旋转点 为左上角  */
 transform-origin:20px 30px;
}


div:hover{
 /*旋转360度*/
 transform:rotate(360deg);
}

7.动画

div {
  width:200px;
  height:200px;
  background-color:pink;
  /*animation: 动画名称 动画时间 运动曲线 何时开始 播放次数(infinite无限循环) 是否反方向*/
 animation: go 2s ease 0s 2 alternate;/*引用动画 一般只使用前两个参数*/
}
/*定义动画 keyframe 动画名称 {} */
@keyframes go{
 /*from{
        transform:translateX(0);
 }
 to{
        transform:translateX(600px);
 }*/
 0%{/*起始位置，等价于 from*/
        transform:translate3d(0，0,0);
 }
 25%{
        transform:translate3d(800px，0,0);
 }
 50%{
        transform:translate3d(800px，400px,0);
 }
 75%{
        transform:translate3d(0，400px,0);
 }
 100%{/*相当于 to*/
        transform:translate3d(0，0,0);
 }
}