CSS用户界面样式

1.鼠标样式cursor

属性：
1.default 小白 原始的箭头形状
2.pointer 小手形状
3.text 文本的形式，形如 I 的形状
4.move 拖动的效果

2.轮廓 outline

轮廓线和边框是两种线，不是同一种，一般情况下outline是不需要的，默认是有的，比如input中，点击后会出现轮廓线，所以一般是去掉的，使用 outline: 0;去掉外面的轮廓线.

取消轮廓线：outline: 0; 或  outline: none;

3.防止拖拽文本域

文本域写完之后，如果文本域可以拖拽，就会发生布局的变化，一般不会让文本域发生拖拽，设置多大就是多大，

防止文本域拖拽  resize: none;

4.行内块元素与文字的对齐

垂直对齐 ：vertical-align
属性：top middle base（基线，文字中平均分布的低的位置） bottom（底线，文字中最矮的地方）
PS：vertical-align 不影响块级元素中的内容的对齐，只针对行内元素和行内块元素，特别是行内块，通常用来控制图片/表单（行内块元素）与文字的对齐。
解释:一张图片 后面加文字，两者在同一行，且默认基线对齐。vertical-align 设置文字和图片之间的对齐，一般在图片/表单中设置vertical-align。

<img src="a.jpg" /> <p>我是底线对齐 </p>  
<!--上面的说明  一张图片后面跟一段文字，且文字在图片的底线对齐-->

<img src="a.jpg" style="vertical-align: middle;"><p> 我现在和图片的中线对齐</p> 

去除图片底侧缝隙
盒子中的图片可能和盒子基线对齐，从来有缝隙。（低版本浏览器效果显著）
解决：1. 将图片img转换为块级元素 display:clock;
2.将默认的基线对齐改了 vertical-align: top; (不用转换为块级元素)

5.溢出文字隐藏（一行显示不完的处理）

1.word-break 自动换行 主要针对英文
属性：normal 使用浏览器默认的换行规则
break-all 允许单词拆开显示 比如 andy 一行只有两个字母的位置了，就显示为：

an
dy

keep-all 不允许单词拆开显示，除非出现连字符 - 如：z-index，显示为

z-
index

2.white-space
设置检索对象内文本显示方式，通常我们使用于强制一行显示内容
normal： 默认处理方式，一行显示不开，就换行
nowrap：强制在同一行显示所有文本，直到文本结束或者遭遇br标签才换行。

3.text-overflow设置或检索是否使用一个省略标记（… 表示对象内文本的溢出
属性 clip | ellipsis
clip 不显示省略标记，， 只是简单的裁切
ellipsis 对对象内文本溢出时显示省略标记

首先需要强制一行内显示即，再和overflow属性搭配使用：

white-spacing: nowrap;  /*强制一行显示*/
overflow: hidden;  /* 将溢出部分隐藏*/
text-overflow: ellipsis; /*显示省略记号*/