CSS禁止选中文本
.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently not supported by any browser */
}
在 IE < 10 和 Opera < 15中我们需要在需要禁止选中的元素上面添加一个属性
unselectable="on"，否则可能不会生效

使用validate时报setDefaults未定义，
1. 确定validate文件正确引用;
2. 确定是否是因为不同版本的jq造成的;
3. 用file_get_contents嵌入到页面的，获取地址的这个页面里不要用$().ready();会造成validate报错

改变placeholder的字体颜色，
input::-webkit-input-placeholder {color:#000;}
input:-moz-placeholder {color:#000;}
input::-moz-placeholder {color:#000;}
input:-ms-input-placeholder {color:#000;}

手机端scrolltop获取值总为0
可以用window.onscroll或者window.addEventListener监听滑动。
window.onscroll = function(){
var scrolltop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
alert(scrolltop);
}
或者
window.addEventListener("onscroll",function(){
var scrolltop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
alert(scrolltop);
})
这样就会一直监听滑动事件

范围随机数的获取
<script>
function getRandom(n,m){
var c = m - n + 1;
return Math.floor(Math.random() * c + n);
}
</script>

animate scrolltop无效问题
$("html,body").animate({"scrollTop":top})

pre自适应
pre{white-space: pre-wrap;word-wrap: break-word;}
文字超出折行
增加属性word-break: break-all;
单行省略号
overflow: hidden;text-overflow:ellipsis;white-space: nowrap;
多行省略号
overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;
适用范围
因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；
多行省略号广适配
p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
p:after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}
适用范围：
该方法适用范围广，但文字未超出行的情况下也会出现省略号,可结合js优化该方法。
注：
1.将height设置为line-height的整数倍，防止超出的文字露出。
2.给p::after添加渐变背景可避免文字只显示一半。
3.由于ie6-7不显示content内容，所以要添加标签兼容ie6-7（如：<span>…<span/>）。

浏览器兼容
1.不同浏览器的标签默认margin和padding值是不同的，所以可以先重置浏览器默认样式再写自己的当时，可以借用一些现成的reset.css，不过要选合适点的。
2.块元素float后有横向margin时，IE6下的双边距问题。(样式中加入display:inline，转为行内元素)
3.行内元素设置display:block后采用float布局，有横向margin是IE6双边距问题。(在display:block后面再加上display:inline;display:table)
4.设置最小高度标签(一般小于10px)IE6，IE7等高度超出设置高度。(给超出高度的标签设置overflow:hidden或设置行高小于自己设置的高度)
5.图片默认的间距。(使用float可以去除间距)
6.透明度属性。(IE下使用filter：alpha(opacity:50)滤镜，其他浏览器opacity:0.5)
7.谷歌下字体小于12px，则按12px显示。(-webkit-text-size-adjust:none;或用css属性-webkit-transform:scale(0.8);)
8.对button设置红色背景色，在苹果手机端会变成粉色。(在样式中加上
input[type="button"],input[type="submit"],input[type="reset"]{-webkit-appearance:none;}
textarea{-webkit-appearance；none;})
9.background兼容性问题。(IE8下这种写法不支持
background:url(xxx) no-repeat center \cover;应该分开写，background:url(xx) no-repeat;background-size:cover;)
10.word-spacing对中文无效。(文字中间加空格就可以了)

性能优化
减少HTTP请求:比如合并图片，合并css样式和js文件，图片较多的页面可以使用图片懒加载等技术
正确理解Repaint(重绘)和Reflow(重排):设置元素的宽高等属性会导致Repaint，所以最好通过class改变样式，有动画效果position属性应设置为fixed或absolute，这样不会影响其他布局，若不能则权衡速度与平滑性
减少对DOM的操作:修改和访问DOM元素会造成页面的Repaint和Reflow，减少对DOM元素的查询和修改，查询时可将其赋给局部变量
使用json格式来进行数据交换:json是一种轻量级的数据交换格式，同时json是JavaScript原生格式，JavaScript中处理json数据不需要任何特殊的API或工具包
推荐使用CDN加速(内容分发网络):将css和js代码放到外部文件中应用，css放头，js放尾，</script>会让页面等待脚本的解析和执行，执行完成后才能继续渲染页面，建议把js代码放到</body>之前，既能有效阻止js的阻塞，又能使HTML结构更快的释放
控制cookie大小和污染:cookie是本地磁盘文件，每次浏览器都会去响应的读取，所以建议去除不必要的cookie，合理的设置cookie的过期时间

两列等高
1.正内补丁和负外补丁(padding-bottom:1000px;margin-bottom:-1000px;),父元素overflow:hidden;
2.利用JavaScript动态修正
3.可以用表单table来等高

垂直居中问题
1.定宽高，left:0,right:0,top:0,bottom:0,margin:auto
2.定宽高，width:1000px,height:100px,left:50%,top:50%,margin-left:-500px,margin-top:-50px
3.不定宽高，父容器display:table，子容器display:table-cell,vertical-align:middel

div下select宽度100%，input宽度100%，不对齐，原因是input的border导致的，可以修改border就可以了

清除浮动
1.增加空标签，
2.利用伪类
3.父容器设置overflow:hidden;属性
注：元素同时用float和position:absolute时，清除浮动会有兼容问题，此时可以用1,3的办法

<input type="text" onfocus="if(this.value == 'xxx'){this.value = 'sss';}" onblur="if(this.value == 'xxxx'){this.value = 'aaaa';}" />
控制其样式：input{color:#777;} => input:focus{display:block;color:#000;}

一般div错位：
1.检查是否position:absolute后是否没设置高度
2.检查float后是否没有清除浮动
3.检查元素的z-index值，是否被覆盖
4.检查是否用了iframe，iframe默认是撑不开父容器的
5.检查div标签是否正确闭合
6.absolute后top:20%无效，确认各父容器的height存在且正确
7.float后位置不对也可能是各容器高度不一样导致的
8.检查盒模型是否一致

image加载错误时加载默认图片<img src="应该加载的图片地址" onerror="this.src='默认的图片加载地址'">

一种左右结构的HTML
两个标签均为块元素，然后浮动第一个，第二个overflow:hidden;这样就能左右排列，然后清除浮动，在父元素上overflow:hidden; 这样的结构主要避免后面元素内内容过多导致包裹的现象