咸鱼前端—CSS高级技巧

鼠标样式cursor

鼠标样式cursor

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

cursor :  default  小白 | pointer  小手  | move  移动  |  text  文本

鼠标放我身上查看效果哦：

<ul>
  <li style="cursor:default">我是白</li>
  <li style="cursor:pointer">我是手</li>
  <li style="cursor:move">我是动</li>
  <li style="cursor:text">我是文本</li>
</ul>

尽量不要用hand 因为 火狐不支持 pointer ie6以上都支持的尽量用

轮廓 outline

是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

 outline : outline-color ||outline-style || outline-width 

但是我们都不关心可以设置多少，我们平时都是去掉的。

最直接的写法是 ： outline: 0; 或者 outline: none;

 <input  type="text"  style="outline: 0;"/>

防止拖拽文本域resize

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

右下角可以拖拽：

右下角不可以拖拽：

<textarea  style="resize: none;"></textarea>

垂直对齐 vertical-align

vertical-align : baseline |top |middle |bottom 

注意：工作中 vertical-align：middle 用的比较多

溢出的文字隐藏

word-break:自动换行

值	描述
normal	使用浏览器默认的换行规则。
break-all	允许在单词内换行。
keep-all	只能在半角空格或连字符处换行。

主要处理英文单词

white-space
white-space 设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容

值	描述
normal	默认处理方式
nowrap	强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。

可以处理中文

text-overflow 文字溢出

设置或检索是否使用一个省略标记（…）标示对象内文本的溢出

值	描述
clip	不显示省略标记（…），而是简单的裁切
ellipsis	当对象内文本溢出时显示省略标记（…）

注意一定要首先强制一行内显示，再次和overflow属性 搭配使用