css小技巧

文字两端对齐

div{
  width:500px;
  border:1px solid red;
  text-align: justify;
}
div i{
  display:inline-block;
  /*padding-left: 100%;*/
  width:100%;
}
div:after {
    content: " ";
    display: inline-block;
    width: 100%;
}

HTML
<div>这世间唯有梦想和好姑娘不可辜负！<i></i></div>

文字溢出

多行文本溢出：
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;


单行文本溢出：
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

禁止页面滑动

var mo = function(e) {
			e.preventDefault();
		};

		/***禁止滑动***/
		function stop() {
			document.body.style.overflow = 'hidden';
			document.addEventListener("touchmove", mo, false); //禁止页面滑动
		}

		/***取消滑动限制***/
		function move() {
			document.body.style.overflow = ''; //出现滚动条
			document.removeEventListener("touchmove", mo, false);
		}

判断是否在微信中打开

	var wx = (function() {
			return navigator.userAgent.toLowerCase().indexOf("micromessenger") !== -1;
		})();
		if (wx) {
			alert("是微信");
		} else {
			alert("请在微信客户端打开");
		}

去除移动端input默认样式

去除input,textarea点击后的光亮样式:outline:none；

苹果手机去除input默认样式
input[type="button"], input[type="submit"], input[type="reset"] {
-webkit-appearance: none;
}


改变input框默认显示字体颜色和字体：placeholder来设置你自己想要的颜色
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #000; opacity:1; 
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #000;opacity:1;
}

input:-ms-input-placeholder{
    color: #000;opacity:1;
}

input::-webkit-input-placeholder{
    color: #000;opacity:1;
}
也可以给这个属性加字体

input::-webkit-input-placeholder { /* WebKit browsers*/ 
　　color:#999;font-size:14px;
　　}
input:-moz-placeholder {  /* Mozilla Firefox 4 to 18*/ 
　　color:#999;font-size:14px;
　　}
input::-moz-placeholder {  /* Mozilla Firefox 19+*/ 
　　color:#999;font-size:14px;
　　}
input:-ms-input-placeholder { /* Internet Explorer 10+*/ 
　　color:#999;font-size:14px;
}

判断设备

var u = navigator.userAgent;
if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {//安卓手机
alert("安卓手机");
// window.location.href = "mobile/index.html";
} else if (u.indexOf('iPhone') > -1) {//苹果手机
// window.location.href = "mobile/index.html";
alert("苹果手机");
} else if (u.indexOf('Windows Phone') > -1) {//winphone手机
alert("winphone手机");
// window.location.href = "mobile/index.html";
}

判断手机横竖屏

判断横竖屏幕  手机端
  function hengshuping() {
        if (window.orientation == 90 || window.orientation == -90) {
            //横屏
            alert("横屏")
        } else {
            //竖屏
            alert("竖屏")
        }
    }
    hengshuping()

    //判断手机横竖屏状态：
    window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
        if (window.orientation === 180 || window.orientation === 0) {
            alert('竖屏状态！');
        }
        if (window.orientation === 90 || window.orientation === -90 ){
            alert('横屏状态！');
        }
    }, false);
    //移动端的浏览器一般都支持window.orientation这个参数，通过这个参数可以判断出手机是处在横屏还是竖屏状态。

初始化html样式

body,
ul,
li,
dl,
dt,
dd,
p,
ol,
h1,
h2,
h3,
h4,
h5,
h6,
form,
img,
table,
fieldset,
legend,
header,
nav,
footer,
menu,
section,
aside,
article,
canvas,
figure,
figcaption {
    margin: 0;
    padding: 0;
}

ul,
li,
ol {
    list-style: none;
}

img,
fieldset {
    border: 0;
}

img {
    display: block;
}

a {
    text-decoration: none;
    color: #333;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 100;
}

body {
    font-family: "微软雅黑";
    margin: 0 auto;
}

input,
a {
    outline: none;
}

小程序scroll-view设置横向滑动需设置样式

white-space: nowrap;