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;