CSS高级技巧

CSS用户界面样式

所谓的界面样式， 就是更改一些用户操作样式， 比如 更改用户的鼠标样式， 表单轮廓.防止表单域拖拽等。
但是比如滚动条的样式改动受到了很多浏览器的抵制。

1.鼠标样式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以上都支持的尽量用

2.轮廓 outline

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

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

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

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

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

3.防止拖拽文本域resize

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

右下角不可以拖拽：

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

4. vertical-align 垂直对齐

设置或检索对象内容的垂直对其方式。
vertical-align 垂直对齐， 这个看上去很美好的一个属性， 实际有着不可捉摸的脾气，

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

模式
基线对齐	vertical-align: baseline;
垂直居中	vertical-align: middle;
顶部对齐	vertical-align: top;

• 图片、表单和文字对齐

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

• 去除图片底侧空白缝隙

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

解决的方法就是：

1. 给img vertical-align:middle | top等等。 让图片不要和基线对齐。
   img {vertical-align: top;}

2. 给img 添加 display：block; 转换为块级元素就不会存在问题了。