1 限制文本输入行数 超出部分溢出隐藏
display: -webkit-box; //规定元素应该生成的框的类型：将对象作为弹性伸缩盒显示
text-overflow: ellipsis; //规定当文本溢出包含元素时发生的事情：显示省略符号来代表被修剪的文本
-webkit-line-clamp: 1; //一个不规范的属性 用来限制文本行数
-webkit-box-orient: vertical; //设置或检索伸缩盒对象的子元素的排列方式
overflow: hidden; //规定当内容溢出元素框时发生的事情：内容会被修剪，并且其余内容是不可见
display: -webkit-box;
text-overflow: ellipsis;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
2 禁用iOS端点击元素时的背景高亮
- //不规范的属性
该属性可以只设置透明度。如果未设置透明度，iOS Safari使用默认的透明度。当透明度设为0，则会禁用此属性；当透明度设为1，元素在点击时不可见。
-webkit-tap-highlight-color:transparent;
-webkit-tap-highlight-color:transparent;
3 iOS端为没有弹性滚动的元素增加弹性滚动
- //创建了带有硬件加速的系统级控件，使得元素有了原生级别的弹性滚动，不过会增加内存的消耗
-webkit-overflow-scrolling: touch;
4 关于word-break和word-wrap
word-wrap: normal | break-word;
//normal：调用浏览器默认行为，不会自动换行
//break-word：自动换行，保证完整性
word-break: normal | break-all | keep-all；
//normal：调用浏览器默认行为，不会自动换行
//break-all：允许在单词内换行,不保证完整性
5 移动端禁用文本选中与图片选中
//禁用文本选中
user-select:none;
-moz-user-select:none;
-webkit-user-select:none;
-ms-user-select:none;
-khtml-user-select:none;
//IE6-IE9写法
document.body.onselectstart=document.body.ondrag=function(){
returnfalse;
}
//禁用图片选中
-webkit-touch-callout: none;
//实则是禁用了移动端系统默认菜单的触发
6 去除 display:inline-block 元素之间的间距
1.父元素 font-size: 0;
2.删除多余空格
font-size: 0;
7 移动端绑定的Dom点击事件失效
定义cursor属性
cursor: pointer;
8 垂直居中
方法一：（移动端推荐）
display:block;
position: absolute;
top:50%;
transform: translateY(-50%);
//注意其兼容性以及不要将子容器置于父容器半个像素的位置上(如500.5px)，否则子容器会出现模糊。
9 文字两端对齐
text-align-last: justify;
10 定义输入框光标颜色
caret-color: red;
11 页面图片黑白化
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
10 定义输入框光标颜色
caret-color: red;
11 页面图片黑白化
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
12 文字描边
text-shadow: 2px 0 #FFFFFF, 0 2px #FFFFFF, 0 -2px #FFFFFF, -2px 0 #FFFFFF;
