前端偏前实践总结(永久更新)

1、全屏背景：

html,body{
width:100%;
height:100%
}
body {
display: block;
background-image: url(“images/bg.jpg”);
background-size: 100% 100%;
background-repeat: no-repeat;
margin: 0;
padding: 0;
border: none;
outline: none;
}

2、absolute居中：

width: 95%;//需要设置宽和高
height: 95%;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
另外如需居中偏上,可以:
position: absolute;
height:20px;
width:20px;
top: -5px;right: 0;bottom: 0;left: 0;
margin: auto;

3、body默认宽度是100%，高度是默认是0，很多情况下需要js设定body的高度为window.screen.height;

window.onload = function () {

    console.log('innerH=' + window.innerHeight);
    document.body.style.minHeight = window.innerHeight+'px';
};

如需全屏背景图,也可以设置html,body{width:100%;height:100%;}

4、显示省略号效果, "white-space: nowrap"规定忽略元素内部的换行符.

white-space: nowrap;
width: 100px;
overflow:hidden;
text-overflow:ellipsis;

截断显示:
white-space: nowrap;
overflow:hidden;
text-overflow:clip;

5、Android浏览器上，输入法软键盘弹出时，可能出现页面整体上移，input框被遮住，导致输入过程中看不到输入的内容。

用position:absolute的div包裹input框会出现这个问题。猜测position:fixed也会有这个问题.(iOS上不会出现这个问题.)
解决办法: 用默认的position, 外加padding-top调整位置.

6、渐变色

background: -webkit-linear-gradient(top, #fefdd0 0%, #fda10e 80%,#fec11a 100%);
background: linear-gradient(to bottom, #fefdd0 0%, #fda10e 80%,#fec11a 100%);
可以不加百分比

7、阴影

box-shadow: 0 2px 4px 2px #fc6d07 inset;
参数解释:
[0]: 阴影的水平偏移量(px),大于0往右偏,小于0往左偏.
[1]: 阴影的竖直偏移量(px)
[2]: 阴影的模糊半径(px),值越大模糊效果越明显.
[3]: 阴影的宽度(px),值越大阴影越宽越厚.
[4]: 阴影颜色
[5]: 可选inset(内阴影)或不写(外阴影outset)

8、采用:after伪类实现radio单选组:

<div class="radio-wrapper">
    <input id="chMale" name="sex" class="regular-radio" type="radio" checked="checked">
    <label for="chMale"></label>
    <div>帅哥</div>
    <input id="chFemale" name="sex" class="regular-radio" type="radio">
    <label for="chFemale"></label>
    <div>美女</div>
</div>

/* RADIO */

.radio-wrapper {
    padding-top: 8px;
    padding-bottom: 8px;
    -webkit-box-orient: horizontal;
    display: -webkit-box !important;
    -webkit-box-align: center;
}

.regular-radio {
    display: none;
}

.regular-radio + label {
    -webkit-appearance: none;
    background-color: #fafafa;
    border: 1px solid #cacece;
    margin-right: 4px;
    margin-left: 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
    padding: 9px;
    border-radius: 50px;
    display: inline-block;
    position: relative;
    margin-top: 4px;
}

.regular-radio:checked + label:after {
    content: ' ';
    width: 12px;
    height: 12px;
    border-radius: 50px;
    position: absolute;
    top: 3px;
    background: #35abff;
    box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);
    text-shadow: 0px;
    left: 3px;
    font-size: 32px;
}

.regular-radio:checked + label {
    background-color: #e9ecee;
    color: #99a1a7;
    border: 1px solid #35abff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1), inset 0px 0px 10px rgba(0,0,0,0.1);
}

.regular-radio + label:active, .regular-radio:checked + label:active {
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}


/* checkbox */

.regular-checkbox {
    display: none;
}

.regular-checkbox + label {
    -webkit-appearance: none;
    background-color: #fafafa;
    border: 1px solid #cacece;
    margin-right: 4px;
    margin-left: 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
    padding: 9px;
    display: inline-block;
    position: relative;
    margin-top: 4px;
}

.regular-checkbox:checked + label:after {
    content: ' ';
    width: 12px;
    height: 12px;
    position: absolute;
    top: 3px;
    background: #35abff;
    box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);
    text-shadow: 0px;
    left: 3px;
    font-size: 32px;
}

.regular-checkbox:checked + label {
    background-color: #e9ecee;
    color: #99a1a7;
    border: 1px solid #35abff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1), inset 0px 0px 10px rgba(0,0,0,0.1);
}

.regular-checkbox + label:active, .regular-checkbox:checked + label:active {
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}

7、判断浏览器类型

var browser={
		versions:function(){
			var u = navigator.userAgent, app = navigator.appVersion;
			return {
				trident: u.indexOf('Trident') > -1, //IE内核
				presto: u.indexOf('Presto') > -1, //opera内核
				webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
				gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐内核
				mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
				ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
				android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端
				iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
				iPad: u.indexOf('iPad') > -1, //是否iPad
				webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
				weixin: u.indexOf('MicroMessenger') > -1, //是否微信 （2015-01-22新增）
				qq: u.match(/\sQQ/i) == " qq" //是否QQ
			};
		}(),
		language:(navigator.browserLanguage || navigator.language).toLowerCase()
	};

8、让div根据内容自适应宽度(用于将div居中等)

display:inline-block;
//如果需要要求内部元素不换行,可加上
white-space: nowrap;