css界面样式 + vertical-align 属性应用 + 文字溢出省略号显示

1 .css之界面样式

• 所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验
• 更改用户的鼠标样式
• 表单轮廓
• 防止表单域拖拽

1.1 鼠标样式cursor

• 鼠标样式格式 li{cursor:pointer;}
  设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

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

• 代码块

<li style="cursor:default">同学你好</li>
    <li style="cursor: pointer;">同学你好</li>
    <li style="cursor:move">同学你好</li>
    <li style="cursor:text">同学你好</li>
    <li style="cursor:not-allowed">同学你好</li>

1.2 取消表单轮廓与防止拖拽文本域

• 给表单或则文本域添加out-line：none样式之后，就可以去掉默认的蓝色边框。

 input,
        textarea {
            outline: none;
        }

• 实际开发中，我们文本域下面是不可以拖拽的。
• 解决方法

textarea {
            resize: none;
        }

2 . vertical-align 属性应用

• css的 vertical-align的属性使用场景：经常用于设置图片（行内元素）或表单和文字居中对齐。官方解释：用于设置一个元素的垂直对齐方式，但其实只能对行内元素或则行内块元素使用。
• 语法
  

值	描述
baseline	默认，元素放在父元素的基线上
top	把元素的顶部和行内最高的元素的顶端对齐
mid	把此元素放在父元素的中部
bottom	把元素的顶部和行内最底的元素的顶端对齐

• 图示
  
• 代码块

 user img {
    vertical-align: middle;
}

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

2. 解决方法有两种
   1.给图片添加vertical-align:top | middle |bottom.（提倡用的）
   2.将图片转化为块级元素display:block

3.文字溢出省略号显示

3.1 单行文字溢出省略号显示

步骤1 :强制一行内显示所有文字
步骤2：隐藏溢出的部分
步骤3：溢出部分省略号取代

div {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 100px auto;
            /*1. 强制一行内显示所有文字 */
            white-space: nowrap;
            /* 2.隐藏溢出的部分 */
            overflow: hidden;
            /* 3.溢出部分省略号取代 */
            text-overflow: ellipsis;
        }

3.2 多行文字溢出省略号显示

1.弹性伸缩盒子模型展示
2.显示在一个块元素显示的文本的行数
3.设置或检索伸缩盒对象的子元素的排列方式

 div {
            width: 206px;
            height: 61px;
            background-color: pink;
            margin: 100px auto;
            overflow: hidden;
            text-overflow: ellipsis;
            /* 1.弹性伸缩盒子模型展示 */
            display: -webkit-box;
            /* 2.显示在一个块元素显示的文本的行数 */
            -webkit-line-clamp: 2;
            /* 3.设置或检索伸缩盒对象的子元素的排列方式 */
            -webkit-box-orient: vertical;
        }