用户界面

1.鼠标样式

语法：选择器:{cursor:属性值}

属性	作用
pointer	小手样式
move	移动样式
text	文本样式
not-allowed	禁止样式

2.取消表单轮廓与拖曳文本域

语法
选择器:{outline: none;}
取消表单轮廓
选择器:{resize: none;}

3.vertical-aglin属性应用

3.1

应用场景：经常使用图片或表单（行内块元素）设置垂直居中

值	描述
baseline	元素放在父元素的基线上
top	把元素顶端与行中最高元素对齐
middle	把元素放在父元素中部
bottom	把元素底部与行中最低元素对齐

3.2图片底部默认空白缝隙问题

原因：行内块元素会和文字的基线对齐

解决方案：

• 给图片添加vertical-aglin，给定随意值都行，只要不是与基线对齐(推荐使用）
• 将图片元素转换为行内块元素，块内元素没有与基线对齐这种说法

4.溢出部分用省略号表示

4.1单行显示



步骤：先强制一行显示，2.隐藏溢出部分 3.溢出部分用省略号显示

点击查看代码

 div {
            width: 150px;
            height: 80px;
            background-color: pink;
            margin: 100px auto;
            /*white-space:normal 
            这个单词的意思是如果文字显示不开自动换行 */
            /* 前置条件1. */
            white-space: nowrap;/*必须强制一行*/
            /* 2. 溢出的部分 */
            overflow: hidden;
            /* 3.文字用省略号替代超出的部分 */
            text-overflow: ellipsis;
        }

4.2多行

点击查看代码

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