CSS高级技巧

鼠标样式cursor

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

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

轮廓 outline

绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
平时都是去掉的。
写法是 ： outline: 0; 或者 outline: none;

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

防止拖拽文本域resize

resize：none 防止火狐 谷歌等浏览器随意的拖动文本域影响页面。

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

vertical-align 垂直对齐

让带有宽度的块级元素居中对齐，是margin: 0 auto;

让文字居中对齐，是 text-align: center;

vertical-align ：设置或检索对象内容的垂直对其方式。

vertical-align : baseline |top |middle |bottom 

vertical-align 不影响块级元素中的内容对齐，它只针对于 行内元素或者行内块元素，特别是行内块元素， 通常用来控制图片/表单与文字的对齐。

默认的图片会和文字基线对齐。
通过vertical-align 控制图片和文字的垂直关系。

去除图片底侧空白缝隙

图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。
这样会造成一个问题，就是图片底侧会有一个空白缝隙。

解决方法：

1. 给img vertical-align:middle | top等等，让图片不要和基线对齐。
2. 给img 添加 display：block; 转换为块级元素就不会存在问题了。

溢出的文字隐藏

word-break:自动换行

normal 使用浏览器默认的换行规则。

break-all 允许在单词内换行。

keep-all 只能在半角空格或连字符处换行。

white-space：文本显示方式

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

normal : 　默认处理方式

nowrap : 　强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。

text-overflow 文字溢出

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

clip : 　不显示省略标记（…），而是简单的裁切

ellipsis : 　当对象内文本溢出时显示省略标记（…）

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