CSS-tips

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

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

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;