CSS-tips
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-width: 4px; -moz-text-stroke-width: 4px; text-stroke-width: 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(斜拉)
