用户界面样式（cursor，resize，vertical-align，outline，文字超出显示省略号）

1. 鼠标样式 cursor

　default： 小白（箭头）默认

　pointer：小手

　move：移动

　text：文本

　not-allowed：禁止

2. 轮廓线（表单外发光）outline

　给表单添加 outline:0;  或者 outline:none;  可以去掉默认蓝色边框

3. 防止拖拽文本域（resize）

　实际开发中 textarea 是不允许拖拽文本域的，使用 resize:none; 解决

　需要注意的是让  <textarea></textarea> 标签在一行显示，不然在文本域的输入框中 有文字空行。

4.垂直居中（vertical-align）

　常用于 设置图片 或者 表单（行内块元素）和文字垂直对齐

　官方解释：用于设置一个元素的垂直对齐方式，只针对  行内元素  或者 行内块元素 有效

　语法：vertical-align：baseline | top | middle | bottom；

　baseline：默认，元素放置在父元素的 基线 上

　top：把元素的顶端 与 行中最高元素 的顶端对齐

　middle：把此元素放置在父元素的 中部

　bottom：把元素的顶端 与 行中最低的元素 的顶端对齐

5. 解决图片底部默认空白缝隙问题

　bug：图片底部会有一个空白缝隙，原因是行内块元素 会和 文字的基线对齐

　主要解决方式两种：

　　1. 给图片添加 vertical-align：middle | top | bottom 等。（提倡使用）

　　2. 把图片转换为 块级元素 display：block；

6. 溢出的文字省略号显示

　1. 单行文本溢出显示省略号（必须满足三个条件）

　　　① 先强制一行内显示文本：white-space：nowrap；

　　　② 超出的部分隐藏：  overflow：hidden；

　　　③ 文字用省略号代替超出的部分 ：text-overflow：ellipsis；（ellipsis省略号）

　2.多行文本溢出显示省略号（兼容性差，适合 webkit 浏览器 或者 移动端（移动端大部分是 webkit 内核））

　　更推荐让后台人原来做此效果，后台人员可以设置显示多少个字，操作更简单

　　　① 超出部分隐藏 ：overflow：hidden；

　　　② 文字超出部分用省略号代替：text-overflow：ellipsis；

　　　③ 弹性伸缩盒子模型显示：display：-webkit-box；

　　　④ 限制在一个块元素显示的文本：-webkit-line-clamp：2

　　　⑤ 设置或检索伸缩盒对象的子元素的排列方式：-webkit-box-orient：vertical；