非常有用的css使用总结

积小流以成江海，很多东西你不总结就不是你的东西

常用css总结：

 

/*设置字体*/
    @font-face {
        font-family: 'myFont';
        src: url('../font/myFont.eot');
        src: url('../font/myFont.eot?#iefix') format('embedded-opentype'), url('../font/myFont.woff2') format('woff2'), url('../font/myFont.woff') format('woff'), url('../font/myFont.ttf') format('truetype'), url('../font/myFont.svg#square721_cn_btroman') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    /*clearfix清楚浮动*/
    
    .clearfix {
        *zoom: 1;
    }
    
    .clearfix:after {
        content: "\0020";
        display: block;
        visibility: hidden;
        clear: both;
        height: 0;
        overflow: hidden;
    }
    /*给input的placeholder设置颜色*/
    
    ::-webkit-input-placeholder {
        /* WebKit browsers */
        color: #999;
    }
    
    :-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
        color: #999;
    }
    
    ::-moz-placeholder {
        /* Mozilla Firefox 19+ */
        color: #999;
    }
    
    :-ms-input-placeholder {
        /* Internet Explorer 10+ */
        color: #999;
    }
    /*文本框焦点状态：没有蓝框*/
    .input{outline:none;}


    /*透明度设置*/
    
    .opacity {
        opacity: .9;
        filter: alpha(opacity=90)
    }
    /*超出文本显示省略号*/
    
    .elips {
        display: bolck;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    /*多行文本显示省略号，这个只支持chrome浏览器*/
    
    .elipsMoreLine {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        width: 100px;
        height: 40px;
        line-height: 20px;
    }
    /*多行文本显示省略号的，跨浏览器兼容，设置元素的高度，用包含省略号(…)的伪类元素模拟实现*/
    
    p {
        position: relative;
        line-height: 20px;
        height: 40px;
        overflow: hidden;
    }
    
    p::after {
        content: "...";
        font-weight: bold;
        position: absolute;
        bottom: 0;
        right: 0;
        padding: 0 20px 1px 45px;
        background-color: #fff;
    }
    /*去掉移动端，a标签点击产生的阴影虚框*/
    
    a {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
    /*强制不换行*/
    div{
       white-space:nowrap;
    }
    /*强制换行*/
    p{
       word-wrap: break-word; 
       word-break: normal; 
    }
    /*单词断行*/
    p{
      word-break:break-all; 
    }

    /*常用伪类*/
    div:after{
        content:'';display:block;position:absolute;
    };
    div:before{
        content:'';display:block;position:absolute;
    }
    .selector:first-child{
        /*选择第一个子元素*/
    }
    .selector:last-child{
    	/*选择最后一个子元素*/
    }
    .selector:first-letter{
    	/*设置第一字符的样式*/
    }
    .selector:nth-of-type(n){
       
    }
    .selector:nth-of-type(2n){
    	
    }
    .selector:nth-of-type(2n+1){
    	
    }
    /*设置文本的间距*/
    .txt{
       letter-spacing:2em;
    }
    /*影藏文本*/
    .hiddentxt{
    	text-indent:999em;overflow:hidden;
    }

    /*全屏遮罩背景*/
    .mask {
        background: #111;
        position: fixed;
        width: 100%;
        height: 100%;
        opacity: 0.8;
        filter: alpha(opacity=80);
        z-index: 100;
        top: 0;
        left: 0;
    }
    /*修正img产生的3像素的bug*/
    
    img {
        border: 0;
        display: inline-block;
        vertical-align: middle;
    }
    /*解决ie6下浮动的双倍间距bug*/
    
    .fl {
        float: left;
        _display: inline
    }
    
    .fr {
        float: right;
        _display: inline
    }
    /*阴影效果*/
    .shadow {
        -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
        -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
        box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
    }
    /*模糊遮罩效果*/
    .blur{
		-webkit-filter: blur(3px);
		-moz-filter: blur(3px);
		-o-filter: blur(3px);
		-ms-filter: blur(3px);
		filter: blur(3px);
     }
     /*从上到下的渐变效果*/
     .gradent{
		background: -webkit-linear-gradient(#ed5a5e, #ed3a61);
		background: -o-linear-gradient(#ed5a5e, #ed3a61); 
		background: -moz-linear-gradient(#ed5a5e, #ed3a61); 
		background: linear-gradient(#ed5a5e, #ed3a61);
     }
     /*从左到右的渐变*/
     .gradent2{
		background:-moz-linear-gradient(left,#ace,#f96);/*Mozilla*/
		background:-webkit-linear-gradient(left,#ace,#f96);/*new gradient for Webkit*/
		background:-o-linear-gradient(left,#ace,#f96); /*Opera11*/
     }
     /*从左上角，到右下角的渐变*/
     .gradent3{
		background: -moz-linear-gradient(left top, #ace, #f96);
		background: -webkit-linear-gradient(left top, #ace, #f96);
		background: -o-linear-gradient(left top, #ace, #f96);
    }
    /*指定角度的渐变*/
    .gradent4{
        background: -moz-linear-gradient(45deg, #ace, #f96);
		background: -webkit-linear-gradient(45deg, #ace, #f96);
		background: -o-linear-gradient(45deg, #ace, #f96);
    }


    /*怪异盒模型,这种模式下增加padding和边框值，元素的宽度不会增加*/
    .box {
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        /* Firefox */
        -webkit-box-sizing: border-box;
        /* chrome */
    }
    * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    /*transition过渡效果:第一个参数为某个属性，第二参数为动画执行的时间，第三个参数为动画的效果速度曲线，第四个参数为动画延迟多久执行*/
    .transition{
    	transition: all 1s linear 2s;
	    -moz-transition:all 1s linear 2s;
		-webkit-transition:all 1s linear 2s;
		-o-transition:all 1s linear 2s;
    }
    /*transform效果:
      translate(x,y);
      translate3d(x,y,z);
      translateX(30px);
      translateY(30px);
      translateZ(30px);
      scale(x,y);
      scale3d(x,y,z);
      scaleX(1.2);
      scaleY(1.2);
      scaleZ(1.2);
      rotate(angle);
      rotate3d(x,y,z,angle);
      rotateX(angle);
      rotateY(angle);
      rotateZ(angle);
      skew(x-angle,y-angle);
      skewX(angle);
      skewY(angle);
      perspective;三维空间。
    */
    .transform{
        transform:rotate(7deg);
		-ms-transform:rotate(7deg); 	/* IE 9 */
		-moz-transform:rotate(7deg); 	/* Firefox */
		-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
		-o-transform:rotate(7deg); 	/* Opera */
    }
    /*animation keyframes帧动画*/
    /*如下：
      第一个参数，帧动画的名称，
      第二个参数，动画执行的时间，
      第三个参数，动画运动的速度曲线，ease、ease-in、ease-out、linear、ease-in-out、cubic-bezier(num1,num2,num3,num4)。
      第四个参,动画延迟执行的时间。
      第五个参数，规定动画播放的次数，infinite是循环无限播放，
      第六个参数，规定是否应该轮流反向播放动画。
      第七个参数：animation-fill-mode: forwards(动画结束之后保持在最后一帧的状态) backwards(动画结束之后保持在第一帧) ;
    */
    .shakeAni{
    	-webkit-animation: shake 0.5s ease-in-out 3s infinite alternate;  
	    -moz-animation: shake 0.5s ease-in-out infinite alternate;  
	    animation: shake 10.5s ease-in-out infinite alternate;  
    }
    @keyframes shake {
	    from {transform:translateX(-10px);}
	    to {transform:translateX(10px);}
	    /*或者使用%写多个不同的区段*/
	    0% {
		    transform:translateX(-10px);
		}
		25% {
		    transform:translateX(10px);
		}
		50% {
		    transform:translateX(-10px);
		}
		75% {
		    transform:translateX(10px);
		}
		100% {
		    transform:translateX(10px);
		}

	}
	@-moz-keyframes shake{
		from {-moz-transform:translateX(-10px);}
		to {-moz-transform:translateX(10px);}
	}
	/* @-ms-keyframes shakeX {
		from {-m-transform:translateX(-@10px);}
		to {-m-transform:translateX(@10px); }
	} */
	@-webkit-keyframes shake{
		from {-o-transform:translateX(-10px); }
		to {-o-transform:translateX(10px);}
	}
	@-o-keyframes shake{
		from {-webkit-transform:translateX(-10px);}
		to {-webkit-transform:translateX(10px);}
	}

    /*css3的方式进行水平竖直居中*/
    .hvCenter {
        position: fixed;
        left: 50%;
        top: 50%;
        z-index: 200;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -o-box-sizing: border-box;
        -ms-sizing: border-box;
        -webkit-transform: translateX(-50%) translateY(-50%);
        -moz-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
        -o-transform: translateX(-50%) translateY(-50%);
    }

    /*css居中的方法还有很多，有空再整理总结*/
    /*移动端常用设备的媒体查询*/
    @media(max-width:320px)
	{
	}
	@media(min-width:321px) and (max-width:639px)
	{
	}
	@media(min-width:640px) and (max-width:767px)
	{
	}
	@media(min-width:768px) and (max-width:1023px)
	{
	}
	@media(min-width:1024px) and (max-width:1200px)
	{
	}
	@media(min-width:1200px) and (max-width:1679px)
	{
	   //笔记本
	}
	@media(min-width:1680px)
	{ 
	  //台式机
	}
    /*后续继续整理填充*/