CSS之元素的显示与隐藏、CSS用户界面样式、溢出文字处理

元素显示隐藏的目的：

主要目的是让一个元素在页面中消失，但是不是在文档源码中删除。最常见的是网站广告，当我们点击类似关闭不见了，但是我们重新刷新页面，依然会出现。

display显示

display设置或检索对象是否及如何显示。
display：none 隐藏对象，与它相反的是display：block，除了转换为块级元素之外，同时还有显示元素的意思。
特点：隐藏之后不再保留位置。

visibility可见性

设置或检索是否显示对象。
visible：对象可视
hidden：对象隐藏
特点：隐藏之后，继续保留原有位置。

overflow属性

overflow:visible;默认的，超出显示
overflow:auto;自动 超出就显示滚动条，不超出不显示
overflow:scroll;一直显示滚动条
overflow:hidden;溢出隐藏

CSS用户界面样式

鼠标样式cursor

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
cursor: default 小白
cursor: pointer 小手
cursor: move 移动
cursor: text 文本
注：尽量不要用hand 因为火狐不支持 pointer ie6以上都支持的尽量用。

轮廓 outline

是绘制于元素周围的一条线，位于边框边缘的外缘，可起到突出元素的作用，一般都用于去掉
outline: 0;
outline: none;

防止拖拽文本域resize

resize: none 这个单词可以防止火狐、谷歌等浏览器随意的拖动文本域。
右下角可以拖拽：

右下角不可以拖拽：

行内块和文字对齐

vertical-align: baseline | top |middle | bottom
vertical-align 不影响块级元素中的内容对齐，它只针对行内元素或者行内块元素，特别是行内块元素，通常用来控制图片和表单与文字的对齐。
注：默认图片会和文字基线对齐，去除图片底侧空白缝隙，绝对办法
1.图片转换为块级元素
2.vertical-align:top;设置图片与文字顶部对齐。

溢出文字处理

word-break:自动换行

normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。
注：主要处理英文单词

white-space

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

text-overflow 文字溢出

text-overflow:clip | ellipsis
设置或检索是否使用一个省略标记（…）标示对象文本的溢出
clip：不显示省略标记（…），而且是简单的裁切
elipsis：当对象内文本溢出时显示省略标记(…)
注意：一定要首先强制一行内显示，再次和overflow属性搭配使用。white-space:nowrap;