CSStips

1.css不换行，自动省略变...

text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;

强制换行

word-break:break-all;word-wrap: break-word;　

2.css清浮动

.clearfix:after{content:'';display:block;clear:both;}

3.html移动版meta

<meta charset="UTF-8">
<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="HandheldFriendly" content="true">

4.body屏幕宽高

var w = window.innerWidth;
var h = window.innerHeight;
var body = document.getElementsByTagName('body')[0];
body.style.width = w + 'px';
body.style.height = h + 'px';

5.css3:nth-child()选择器

div:nth-child(2)

6.css3兼容前缀

-webkit-transition:all 1s; 
-moz-transition:all 1s; 
-o-transition:all 1s; 

7.rem

rem和em单位一样，都是一个相对单位,不同的是em是相对于元素的父元素的font-size进行计算,rem是相对于根元素html的font-size进行计算,这样一来rem就绕开了复杂的层级关系，实现了类似于em单位的功能。默认情况下浏览器给的字体大小是16px，按照转化关系 16px = 1rem，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em。

<script type="text/javascript">
var docEl = document.documentElement,
    //当设备的方向变化（设备横向持或纵向持）此事件被触发。绑定此事件时，
    //注意现在当浏览器不支持orientationChange事件的时候我们绑定了resize 事件。
    //总来的来就是监听当然窗口的变化，一旦有变化就需要重新设置根字体的值
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function() {
        //设置根字体大小
        docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px';
    };

//绑定浏览器缩放与加载时间
window.addEventListener(resizeEvt, recalc, false);
document.addEventListener('DOMContentLoaded', recalc, false);
</script>

8.http错误代码

2xx - 成功
200 - 成功。 此状态代码表示 IIS 已成功处理请求。　

3xx - 重定向　
302 - 对象已移动

4xx - 客户端错误
400 - 请求无效　
404- 无法找到文件

5xx - 服务器
500 - 内部服务器错误

 9.transform3D旋转

给该旋转元素的父级添加，再针对该元素添加 transform: translateY(20px);

-webkit-perspective: 700px; //一个元素设置三维透视的距离 
-webkit-transform-style: preserve-3d; //它的直接子元素便会有3D效果
-moz-perspective: 700px; 
-moz-transform-style: preserve-3d;

10.style重置

body,h1,h2,h3,h4,h5,h6,p,ol,ul,dl,dd,input,form{margin:0;padding:0; }
li{list-style:none;vertical-align:top;padding:0;}
a{text-decoration:none;outline:none;}
img{border:none;vertical-align:top;border:0;}
input,form{border:none;outline:none;} 
.clearfix:after{content:'';display:block;clear:both;} 
.clearfix{zoom:1;}
html *{outline: 0;-webkit-text-size-adjust: none;-webkit-tap-highlight-color:rgba(0,0,0,0);-moz-tap-highlight-color:transparent;tap-highlight-color:transparent;}

11.移动端点击按钮出阴影解决方案

-webkit-tap-highlight-color:transparent;
-moz-tap-highlight-color:transparent;
tap-highlight-color:transparent;

12.css多行超出显示...

word-wrap:break-word;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

13.css移动端元素动画时的闪动

div
{
backface-visibility:hidden;
-webkit-backface-visibility:hidden;	/* Chrome 和 Safari */
-moz-backface-visibility:hidden; 	/* Firefox */
-ms-backface-visibility:hidden; 	/* Internet Explorer */
}

14.css元素修剪

clip:rect(0px,100px,auto,0px);　　

15.文字加粗

-webkit-text-stroke- 4px;
-moz-text-stroke- 4px;
text-stroke- 4px;

16.base64编码：是网络上最常见的用于传输8Bit字节代码的编码方式之一，可用于在HTTP环境下传输较长的标识信息。

常用于background-image图片，适用于图片不大，并多次用到。例如：

background-image:url(data:image/gif;base64,R0lGODlhBAABAIABAMLBwfLx8SH5BAEAAAEALAAAAAAEAAEAAAICRF4AOw==);

17.-webkit-box-reflect：倒影

box-reflect：none | <direction> <offset>? <mask-box-image>?
<direction> = above | below | left | right
<offset> = <length> | <percentage>  //定义倒影与对象之间的间隔，长度|百分比
<mask-box-image> = none | <url> | <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient>
默认值：none

18.transform 

transform-style:none|preserve-3d;
translate(位移)、rotate(旋转)、scale(缩放)、skew(斜拉)