CSS学习笔记——用户界面样式

1.鼠标样式 cursor

常见的鼠标样式：

cursor	含义
default	默认采用小白样式
pointer	小手
move	移动
text	文本选择

注意：小手不要使用hand，因为火狐浏览器不支持，尽量使用pointer。

2.轮廓线 outline

轮廓是绘制在元素周围的一条线，位于边框边缘的外围，起到突出元素的作用
一般情况下，我们常常将轮廓线取消，不设置大小，outline:none/0;

3.防止拖拽文本域 resize

resize:none;

4.垂直对齐

vertical-align:top/middle（使用最多）/baseline（默认）
常用于实现图片或者表单等行内块元素与文字的对齐 注意对块级元素无效
注意：图片或者表单等行内块元素，它们的底线会和父级盒子的基线对齐，这样就会造成图片底测会有一个空白间隙。
解决方法：1.将行内块元素转换为块级元素； 2.使用vertical-align:top/middle

  textarea {
            resize: none;
            outline: none;
            border: 1px solid skyblue;
            background-color: #fab7f3;
            color: red;
            vertical-align: top; 文字元素与文本域的上部分对齐
        }

5.溢出文字隐藏

自动换行：word-break:normal（默认）/break-all（允许在单词内换行）/keep-all（只能在半角空格或连字符处换行），主要用于处理英文单词。
检索文本显示方式：white-space:nowrap; 强制文本在同一行显示 可以用来处理中文。
文字溢出：text-overflow：clip（简单的裁剪，没有省略号）/ellipsis（文本溢出时显示省略号）。
注意使用文本溢出text-overflow时，必须先将文本强制在同一行，然后再将溢出的文本隐藏，最后再用省略号代替。
使用text-overflow前，需要指定属性white-space:nowrap;overflow:hidden;

  .text {
            width: 120px;
            height: 20px;
            border: 1px solid red;
            /* word-break: break-all; */
            文本隐藏溢出部分，必须先将文本强制在同一行显示
            white-space: nowrap;
            overflow:hidden;  /*溢出部分 隐藏*/
            text-overflow: ellipsis;  /*使用省略号代替*/
      }