CSS用户界面样式

1.鼠标样式cursor

（1）语法：li {cursor:pointer;}

（2）属性值：default(默认)、pointer(小手)、move(移动)、text(文本)、not-allowed(禁止)

2.轮廓线outline

（1）给表单添加outline:0;或outline:none;样式之后，就可以去掉默认的蓝色边框。

input{  outline-none;}

3.防止拖拽文本域resize

（1）语法：textarea{resize:none;}

4.vertical-align属性应用

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

（2）设置一个元素的垂直对齐方式，只针对行内元素或行内块元素

（3）语法:vertical-align: baseline（默认，元素放在父元素的基线上） | top（把元素顶端与行中最高元素的顶端对齐） | middle| bottom

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

（1）给图片添加vertical-align:middle|top|bottom

（2）把图片转换为块级元素display: block;

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

（1）单行文本：

①先强制一行内显示文字

white-space:nowrap;（默认noral自动换行）

②超出部分隐藏

overflow:hidden;

③文字用省略号替代超出部分

text-overflow:ellipsis;

7.多行文本溢出显示省略号（有兼容性问题，适合webkit浏览器或移动端）

（1）overflow:hidden;

text-overflow:ellipsis;

/*弹性伸缩盒子模型显示*/

display:-webkit-box;

/*限制在一个块元素显示的文本的行数*/

-webkit-line-clamp:2

/*设置或检索伸缩盒对象的子元素的排列方式*/

-webkit-box-orient:vertical;