2016-3-22
强调
em表示强调，strong 表示更强烈的强调。并且在浏览器中em 默认用斜体表示，strong用粗体表示。
使用img设置background-position时会出现意外的灰色border：
自定义icon可用span来替代img，使用img设置background-position时会出现意外的灰色border，但是设置border并不能去掉这个框。
2016-3-23
css通过img坐标获取icon（又叫css精灵）：
通过定义背景图和设置坐标选取图像。background-position的x，y坐标为第一，第二个参数、选取右下方的区域时这两个参数为负。原因是图像默认从span /div框的左上顶点开始显示，此处为（0,0），若要显示图像右下方的内容，需要把背景图往左上方向移动，x，y为位移。
background-image: url(“./img/icon_gather.png”);
background-position: -50px 0px;
width: 14px;
height: 14px;
简写方法： background: url(./img/icon_gather.png) no-repeat -50px 0px;
修改placeholder颜色：
<input class="phone-number" placeholder="手机号/账号">
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #8a9399;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #8a9399;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
color: #8a9399;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: #8a9399;
}
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
color: #2e3133;
}
去掉浏览器给表单元素加的顽固效果
chrome黄色背景
input:-webkit-autofill, input:hover:-webkit-autofill,input:active:-webkit-autofill,textarea:-webkit-autofill, select:-webkit-autofill {
background-color: #fafafa !important;
-webkit-box-shadow: 0 0 0px 1000px #fafafa inset;
color:#555 !important;
}
chrome蓝色边框去掉
input:hover,input:active,input:focus,textarea:focus,select:hover,select:active,select:focus,.table tr td[contenteditable="true"]:focus,.table tr td[contenteditable="true"]:active,button:active,button:hover,button:focus{
outline: none!important;
}
firefox虚线框
a,a:focus {
outline:none !important;
}
button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner {
border:none !important;
}
按钮效果：
.button:hover{
background-color: #2ed1b0;
color: #FFFFFF;
}
.button:active{
background-color: #2ed1b0;
color: #FFFFFF;
}
2016-3-29
div阴影
box-shadow: 0px -2px #0d856d;
滚动条
overflow-y: auto;是超出范围自动，scroll是任何时候都显示滚动条。
鼠标手势
cursor:not-allowed;禁止操作
Move：拖动
pointer:手型，点击。
crosshair:十字，截图
text:文本
wait:等待,转圈
default:箭头
help:问号
auto:自动
2016-5-12
无序列表去掉点
li{list-style: none;}
颜色写法
每两位的值相同，可以缩写一半 #606（#660066），用来节省文件大小
固定宽度
.average-3{
min-width: 312px;
max-width: 312px;
}
box-sizing
content-box
浏览器对盒模型的解释遵从我们之前认识到的 W3C 标准；在宽度和高度之外绘制元素的内边距和边框。
border-box
浏览器对盒模型的解释与 IE6 相同；内边距和边框都在已设宽度和高度内绘制。
适用于宽度为父元素百分比又同时具有padding，border情况，免于计算content width
inherit
规定应从父元素继承 box-sizing 属性的值。
Firefox 使用 -moz-box-sizing，Safari / WebKit 使用 -webkit-box-sizing，Opera 用 box-sizing 。
button
button自带提交功能 如果地址栏出现乱码 添加type=’button’
contenteditable
元素属性。true内容可编辑，false不可编辑。
文字上下居中
- height = line-height
- display：table（父），display：table-cell （子）+ vertical-align:middle
CSS3 Background
一、设置背景色：background-color
background-color: transparent （默认 透明）|| <color>
常用的颜色格式为：
颜色名："red"；
rgb : rgb(255, 0, 0)、rgb(100%, 0%, 0%)；
hls ：hsl(240,50%,20%)；
二进制值： #FF0000；
rgba值：rgba(255,0,0,1)。
二、设置背景图片 : background-image
background-image: none || <url>
三、设置背景图片重复：background-repeat
默认repeat，背景图片沿元素的X轴和Ｙ轴同时平铺；
repeat-x：背景图片仅沿Ｘ轴水平平铺；
repeat-y背景图片仅沿Ｙ轴平铺；
no-repeat表示背景图片不做任何铺放格式设置。
四、设置背景图像是否固定或者随着页面的其余部分滚动 : background-attachment
background-attachment: scroll || fixed
默认scroll背景图片随滚动条一起滚动，fixed背景图片固定不动。
五、设置背景图片的位置：background-position
background-position: || || [left|center|right][,top|center|bottom]
background-position主要是用为设置背景图片的位置，其默认值为(0,0)||(0%,0%)||(left top),可以进行具体的百分数或数值设置，也可以使用left,center,top,right,top,bottom配合设置，而其中以下几种表示相同定位方式：
"top left","left top"和"0% 0%","0,0"代表元素的左上角；
"top","top center","center top"和"50% 0"表示在元素顶边居中位置；
"right top","top right"和"100% 0"代元素的是元素的右上角位置；
"left","left center","center left"和"0% 50%"表示在元素左边中间位置；
"center","center center"和"50% 50%"表示在元素中间位置；
"right","right center","center,right"和"100% 50%"表示在元素右边中间位置；
"bottom left","left bottom"和"0% 100%"表示在元素的左下角；
"bottom","bottom center","center bottom"和"50% 100%"表示在元素的底下中间点位置；
"bottom right"，"right bottom"和“100％ 100％”表示在元素右下角位置
六、背景图片大小：background-size
background-size: auto || <length> || <percentage> || cover || contain
1、auto:此值为默认值，保持背景图片的原始高度和宽度；
2、<length>此值设置具体的值，可以改变背景图片的大小；
3、<percentage>此值为百分值0％〜100％，根据所在元素的宽度的百分比来计算。
4、cover：将背景图片放大到适合容器的大小，会使用背景图片失真；
5、contain:将背景图片缩小，以适合铺满整个容器，同样会使用图片失真。
当background-size取值为<length>和<percentage>时可以设置两个值，也可以设置一个值，当只取一个值时，第二个值相当于auto，auto与第一个值相同。
兼容
Ｍozilla
-moz-background-size: auto || <length> || <percentage> || cover || contain
Webkit
-webkit-background-size: auto || <length> || <percentage> || cover || contain
Presto
-o-background-size: auto || <length> || <percentage> || cover || contain
W3c标准
background-size: auto || <length> || <percentage> || cover || contain
textarea不可拖动大小
resize: none;
超出范围用省略号
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
2016-6-19
文字自动换行
- word-break:break-all;只对英文起作用，以字母作为换行依据
- word-wrap:break-word; 只对英文起作用，以单词作为换行依据
- white-space:pre-wrap; 只对中文起作用，强制换行
文字不换行
white-space:nowrap; 强制不换行，都起作用
判断对象为空
- jQuery.isEmptyObject
- JSON.stringify(c) == “{}”
四舍五入
a.toFixed（） 四舍五入小数点后第n位
var a=2.1517831231231321;
document.write("原来的值："+a+"");
document.write("两位小数点:"+a.toFixed(2)+"四位小数点"+a.toFixed(4));
var aa = 2.3362;
a.toPrecision(x) 四舍五入整个数长度为x
document.write(aa.toPrecision(2)); // 2.3
document.write(aa.toPrecision(3)); // 2.34
document.write(Math.round(aa * 10) / 10); // 2.3
document.write(Math.round(aa * 100) / 100); // 2.34
Math.round(a*100)/100; 取整 四舍五入
强制转换数字
Number()的强制类型转换与parseInt()和parseFloat()方法的处理方式相似，只是它转换的是整个值，而不是部分值。parseInt()和parseFloat()方法只转换第一个无效字符之前的字符串。如“3.4.5”被转换成“3.4”，用Number()进行强制类型转换将返回NAN,如果字符串值能被完整地转换，Number()将判断是调用parseInt()还是parseFloat()。
JSON的序列化和反序列化
#####JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。
JSON.stringify 数组序列化 对象转json
相反有JSON.parse 反序列化 从一个字符串中解析出json对象
鼠标中键打开新窗口
rel=”external”
JQ
$('#id').siblings() 当前元素所有的兄弟节点
$('#id').prev() 当前元素前一个兄弟节点
$('#id').prevaAll() 当前元素之前所有的兄弟节点
$('#id').next() 当前元素之后第一个兄弟节点
$('#id').nextAll() 当前元素之后所有的兄弟节点
多选框置空 $().empty(); 多选框的值 $().val();
根据attr选择元素，如campus_id属性：
$('.campus-list tr[campus_id='+ schoolId +']').find('.classroom-total').html(trCount);
回车
$(".search-content").keyup(function(){ if(event.keyCode == 13){
$(".button").trigger("click");
}});
checkbox点击勾选/移除的判断
$("input[type='checkbox']").click(function(){
if($(this).is(':checked')){
console.log('勾选');
}else{
console.log('移除');
}
});
梳理几种滚动
$(window).scrollTop(); 滚动距离，滚出上部视野外长度
$(window).height(); 可视范围高度，浏览器中间部分高度
$(document).height(); 文档长度，页面总长度
$(window).scrollTop() == 0；滚动在最顶端
$(window).scrollTop() == $(document).height()-$(window).height() 滚到在最底部
随机数
function GetRandomNum(Min,Max){
var Range = Max - Min;
var Rand = Math.random();
return(Min + Math.round(Rand * Range));
}
var num = GetRandomNum(0,4);
拓展：编写一个javscript函数 fn，该函数有一个参数 n（数字类型），其返回值是一个数组，该数组内是 n 个随机且不重复的整数，且整数取值范围是 [2, 32]。
if(array.indexOf(num) = -1){
array.push(num) ;
} else{
i--;
}
jquery each循环,要实现break和continue的功能：
break—-用return false;
continue –用return ture;
判断手机端和pc端
var system = { win: false, mac: false, xll: false, ipad:false};
//检测平台
var p = navigator.platform;system.win = p.indexOf("Win") == 0;system.mac = p.indexOf("Mac") == 0;system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);system.ipad = (navigator.userAgent.match(/iPad/i) != null)?true:false;
if (system.win || system.mac || system.xll||system.ipad) {
} else {
}
checkbox与文字绑定 id，for=
<label class="name-list" for="xxx">
<input type="checkbox" id="xxx" checked="">
行数限制
例如限制3行
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-line-clamp 目前仍然是一个不规范的属性, 它并没有出现在 CSS 规范草案中。作用是限制一个块级元素显示的文本行数。为了实现此效果还需要和其它的 CSS 属性组合使用, 如下:
display: -webkit-box; 必须结合的属性, 用于将对象作为弹性盒模型显示。
-webkit-box-orient 必须结合的属性, 设置或检索弹性盒模型的子元素的排列方式。
text-overflow 可以隐藏多出的文本并用省略号代替。
低版本浏览器的检测与友好提示
<!--[if lte IE 9]>
<p class="browsehappy">你正在使用<strong>过时</strong>的浏览器， 请 <a href="http://browsehappy.com/" target="_blank">升级浏览器</a>
以获得更好的体验！</p>
<![endif]-->
或
$(document).ready(function() {
var b_name = navigator.appName;
var b_version = navigator.appVersion;
var version = b_version.split(";");
var trim_version = version[1].replace(/[ ]/g, "");
console.log();
if (b_name == "Microsoft Internet Explorer") {
/*如果是IE6或者IE7*/
if (trim_version == "MSIE7.0" || trim_version == "MSIE6.0" || trim_version == "MSIE8.0") {
alert("IE浏览器版本过低，请到指定网站去下载相关版本");
//然后跳到需要连接的下载网站
//window.location.href="http://jiaoxueyun.com/download.jsp";
}
}
});
模糊
-webkit-filter: blur(1px);
文字3d效果
text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
transform:translate(0,20px);
-webkit-transform:translate(0,-15px);
-moz-transform:translate(0,-15px);
-o-transform:translate(0,-15px);
-ms-transform:translate(0,-15px);
859
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
