CSS用户界面样式

1.鼠标样式（cursor）
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

属性值	描述
default	小白 默认
pointer	小手
move	移动
text	文本
not-allowed	禁止

---

2.轮廓线 （outline）
给表单添加outline：0；或者outline：none；样式之后，可以去掉默认的选中蓝色边框。

input {
   outline：none；
}

---

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

实际开发中，我们文本域右下角是不可以拖拽的。可以设置
textarea {
     resize：none；
}

---

4.vertical-align 属性应用

CSS的vertical-align属性使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐。
官方解释：用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。

属性值	描述
baseline	默认。元素放置在父元素的基线上
top	把元素的顶端与行中最高元素的顶端对齐
middle	把此元素放置在父元素中部
bottom	把元素的顶端与行中最低的元素的顶端对齐

解决图片底部默认空白缝隙的问题
bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。

主要解决方法有两种：

1. 给图片添加vertical-align：middle|top|bottom等
2. 把图片转换为块级元素display：block

---

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

1.单行文本溢出显示省略号，三个条件：

   /* 1.强制一行内显示文本 */
        white-space: nowrap;
   /* 2.超出部分隐藏 */
        overflow: hidden;
   /* 3.文字用省略号代替超出部分 */
        text-overflow: ellipsis;
    

显示效果：

2. 多行文本溢出显示省略号
有较大兼容性问题，适用于webkit浏览器或移动端（因为移动端大部分为webkit内核）

    overflow: hidden;
    text-overflow: ellipsis;
    /* 弹性伸缩盒子模型显示 */
    display: -webkit-box;
    /* 限制一个块元素显示的文本的行数 */
    -webkit-line-clamp: 2;
    /* 设置或检索伸缩盒对象的子元素的排列方式 */
    -webkit-box-orient: vertical;

显示效果：