CSS 常用方法小计

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

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
apple-mobile-web-app-capable : 删除默认的苹果工具栏和菜单栏
apple-mobile-web-app-status-bar-style : 控制状态栏显示样式(顶部时间那一块)

<meta name="renderer" content="webkit|ie-comp|ie-stand">
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.输入框只能输入数字

<input type="text" maxlength="3" onkeyup='this.value=this.value.replace(/\D/gi,"")'>

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 颜色

<input type="text" placeholder="我爱北京天安门" value=" ">

:-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;
}