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 */}//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 */}

关键字：css, WEB前端开发, hidden, transform

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！