css05

用户界面样式

所谓的界面样式，就是更改一些用户炒作，比如更改用户的鼠标样式。单是比如滚动条的样式改动受到了很多浏览器的地址。

1.1 鼠标样式cursor

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

1.2 轮廓 outline

是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
outline ：outline-color| outline-style |outline-width
但是我们都不关系可以设置多少，平时我们都是去掉
最直接的写法是：outline ：0

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

1.3 防止拖拽

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

 <textarea style="resize:none"><\textarea>

Vertical-align 垂直对齐

一起我们讲过没有宽度的块级元素居中对齐，是margin 0 auto
以前我们还讲过文字居中对齐，是text-align：center
但是我们重来没有讲过垂直居中的属性。vertical-align 垂直对齐，

2C069BA6-3BC4-45BD-BDF8-F488EF38FAF1.png

vertical-align:baseline |top |middle|bottom
设置或检索对象内容的垂直对齐方式
vertical-algin 不印象块级元素中的内通对齐，它只针对于行内元素或者行内块元素，特别是内行块元素，通常用来控制图片和表单文字的对齐。

去除图片低侧空白缝隙

有个很重要特性你要记住，图盘或者表单灯行内块元素，他的底线会和父级盒子的基线对齐。这样会造成一个问题，就是图片底侧会有一个空白的缝隙。
解决的方法是：
1 给img添加display：block 转换为块级元素就不会存在问题。
2 最好的解决方案 img:vertical-align:top

word-break自动换行

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

white-sapce

white-space 设置或检索对象内文本显示方式。同城我们使用于强制一行显示内容。
normal 默认处理方式
norwrap：强制在同一行内显示所有文本，知道文本解释或者遇到br标签对才换行

text-overflow 文字溢出

text-overflow：clip|ellipsis
clip:不显示省略标记（...）,是简单的裁剪
ellipsis：当队形内文本溢出显示省略标记（...）
注意一定要首先强制一行内显示，再次和overflow 属性搭配使用。