表单中常用的样式属性

outline 轮廓线

outline有四个子属性

• outline-color：<color值>；
• outline-style：none | dotted(点) | dashed(虚线) | solid(实线) | double(双实线) | ···；
• outline-width：thin(细) | medium(默认) | thick(粗) | <length值>;
• outline-offset：<length值>;   定义轮廓距离容器的值

outline属性可以连写：outline：[outline-color] || [outline-style] || [outline-width] || [outline-offset]

去除轮廓线：outline: none; 或者 outline：0；

cursor 鼠标样式

• default ： 小箭头（默认）
• pointer：小手（适合链接，按钮等的样式）
• move：十字（拖拽样式）
• text：文本的默认样式

cursor的属性值还有很多，但许多兼容性不好，一般来说常用的就这四个

resize 拉伸缩放

• none：禁止缩放
• both：双向缩放
• vertical：垂直拉伸
• horizontal：水平拉伸

适用于任意获得"overflow"条件的容器。但兼容性很差。一般也只支持双向缩放。

文本域的这个属性设置为none最好。防止被恶意缩放。

vertical-align 垂直对齐方式

• top （顶线对齐）
• middle  （中线对齐）
• baseline  （基线对齐，默认）
• bottom  （底线对齐）

vertical-align 不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素，特别是行内块元素 。

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

所以请在css初始化的时候就设置不为baseline对齐，只要不是基线对齐都行。

white-space 文本显示方式

• normal  默认，自动换行
• nowrap  不换行

overflow 溢出

• hidden 溢出隐藏
• auto 超出则显示滚动条
• scroll 一直显示滚动条
• visible 不隐藏溢出，也没有滚动条（默认值）

text-overflow 文字溢出

• ellipsis 溢出部分显示省略号
• clip 溢出部分剪切

要实现溢出部分显示省略号首先要强制一行内显示（white-space: nowrap），其次要溢出隐藏（overflow：hidden）