一、文字超出隐藏变...

    white-space: nowrap;   //强制不换行
    text-overflow: ellipsis;  //超出变省略号
    overflow: hidden;  //超出隐藏
    word-wrap: break-word; //英文单词换行

二、CSS3动画效果@keyframes

    01:鼠标悬浮背景变化
    .load-more:hover{
        animation:change .5s ease-in;
    }
    @keyframes change{
        0%,20%{opacity:0.25;}
        30%,50%{opacity:0.55;}
        60%,80%{opacity:0.75;}
        90%,100%{opacity:1;}
    }


    02:3D旋转
    .earth-round{
        -webkit-animation:earthmove 2s linear both infinite;
    }
    @keyframes earthmove{
        to{transform:rotateY(360deg)translateZ(20px)};
    }


    03:360度旋转
    .earth-round{
        -webkit-animation:earthmove 2s linear both infinite;
    }
    @-webkit-keyframes earthmove{
        0% {-webkit-transform:rotate(0deg);}
        50% {-webkit-transform:rotate(180deg);}
        100% {-webkit-transform:rotate(360deg);}
    }

三、清楚浮动Clearfix

    .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
    .clearfix{*+height:1%;}

四、无论多少文字都垂直居中(定位方式)

    //Html 
    <div class="middle-box">
        <div class="middle-inner">
            <p>前端开发博客,专注前端开发和web教程前端开发博客</p>
        </div>
    </div>

    //Css
    .middle-box{
        display:table; 
        height: 300px; 
        border:1px solid #ff0000; 
        width:400px; 
        margin:0 auto; 
        position:relative;
    }
    .middle-inner{
        display: table-cell; 
        vertical-align:middle; 
        *position:absolute; 
        *top:50%; *left:50%; 
        width:100%; 
        text-align:center;
    }
    .middle-inner p{
        position:relative; 
        *top:-50%; 
        *left:-50%;
    }

五、浏览器input placeholder颜色重置

input::-webkit-input-placeholder { 
    /* WebKit, Blink, Edge */
    color: #fff;
}
input:-moz-placeholder { 
    /* Mozilla Firefox 4 to 18 */
    color:  #fff;
}
input::-moz-placeholder { 
    /* Mozilla Firefox 19+ */
    color:  #fff;
}
input:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color:  #fff;
}

六、CSS自定义input[type="checkbox"]

演示地址:http://js.itivy.com/jiaoben1503/index.html

    /* html */
    <input type="checkbox" id="checkbox-all"><label for="checkbox-all"></label>

    
    /* css*/
    .table input[type="checkbox"]{
        display: none;
    }
    .table input[type="checkbox"] ~ label{
        display: inline-block;
        width: 18px;
        height: 18px;
        color: #fff;
        margin-right:5px;
        cursor: pointer;
        line-height: 18px;
        text-align: center;
        border-radius:5px;
        background-color: #cccccc;
    }
    .table input[type="checkbox"]:checked + label {
        background-color: #0067D0;
    }
    .table input[type="checkbox"] + label:before{
        content:"\2714";
    }

六、CSS预设

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video, input, textarea, button {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  box-sizing: border-box;
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
  outline: none;
  border-radius: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-appearance: none;
  -webkit-overflow-scrolling: touch;
  @media only screen and (min-width: 1200px) {
    cursor: none !important;
  }
}
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

a:hover, a:active {
  outline: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

七、input只允许输入正整数/规定数字大小

    onkeyup="this.value=this.value.replace(/\D/g,'')" 
    onafterpaste="this.value=this.value.replace(/\D/g,'')"
    //规定允许输入大小值
    $('.threety').on('keyup',function(){
        var v = parseInt($(this).val(), 10);
        if( v > 30){
            $(this).val(30);
        }
    });

八、JS快速求数组和

    eval(arry.join('+'));