1.清除浮动

1st:.clear{    clear:both; height: 0; line-height: 0; font-size: 0}2ed:.over-flow{    overflow: auto; zoom: 1; //zoom: 1; 是在处理兼容性问题}3rd:.outer {zoom:1;}    /*IE6/7*/.outer :after {    clear:both;content:'.';display:block;    width: 0;height: 0;visibility:hidden;}   /*FF/chrome/opera/IE8*/

2.单行多行文字超出省略号

多行：display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;word-break: break-all;单行：width: 500px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;

3.移动端meta

    
    apple-mobile-web-app-capable : 删除默认的苹果工具栏和菜单栏apple-mobile-web-app-status-bar-style : 控制状态栏显示样式(顶部时间那一块)
    360浏览器设置成急速模式

4.页面滚动穿透

当弹出 弹框的时候，给body设置overflow: hidden;$('body').css('overflow','hidden');弹框消失的时候，overflow: initial;$('body').css('overflow','initial');

5.垂直水平居中

#parent {display: table}#child{    display: table-cell;    vertical-align: middle;    text-align: center;}//css3.verticalcenter{    position: relative;    top: 50%;    -webkit-transform: translateY(-50%);    -o-transform: translateY(-50%);    transform: translateY(-50%);}

6.单词换行中间加上

hyphens:auto

7.输入框只能输入数字

8.跨浏览器透明度

.transparent {    filter: alpha(opacity=50); /* internet explorer */    -khtml-opacity: 0.5;      /* khtml, old safari */    -moz-opacity: 0.5;       /* mozilla, netscape */    opacity: 0.5;           /* fx, safari, opera */}

9.CSS开启硬件加速

.cube {   -webkit-transform: translateZ(0);   -moz-transform: translateZ(0);   -ms-transform: translateZ(0);   -o-transform: translateZ(0);   transform: translateZ(0);   /* Other transform properties here */}//webkit内核.cube {   -webkit-transform: translate3d(0, 0, 0);   -moz-transform: translate3d(0, 0, 0);   -ms-transform: translate3d(0, 0, 0);   transform: translate3d(0, 0, 0);  /* Other transform properties here */}

10.Chrome and Safari中，使用CSS transforms 或者 animations闪烁

.cube {   -webkit-backface-visibility: hidden;   -moz-backface-visibility: hidden;   -ms-backface-visibility: hidden;   backface-visibility: hidden;    -webkit-perspective: 1000;   -moz-perspective: 1000;   -ms-perspective: 1000;   perspective: 1000;   /* Other transform properties here */}

11.placeholder 不垂直居中

line-height: normal;        input::-webkit-input-placeholder { /* WebKit browsers */      line-height: 1.5em;    }    input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */      line-height: 1.5em;    }    input::-moz-placeholder { /* Mozilla Firefox 19+ */      line-height: 1.5em;    }    input:-ms-input-placeholder { /* Internet Explorer 10+ */      line-height: 1.5em;    }

12.placeholder 颜色

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */    color: #f00;  }::-moz-placeholder { /* Mozilla Firefox 19+ */    color: #f00;}input:-ms-input-placeholder,textarea:-ms-input-placeholder {    color: #f00;}input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {    color: #f00;}