Android 程序员搞 Web 之 CSS（五）

Android程序员搞Web之CSS（四）

一、CSS 高级应用

1、控件显隐性

display ： none 隐藏控件；display ： block 显示控件； 不占据控件位置；

visibility： inherit 跟随父控件可见性 ； visible 对象可见 ；hidden 对象不可见；collapse 隐藏表格的行或者列 ；占据原控件位置；

overflow：visible 不剪切内容也不显示进度条；auto 在需要时剪切内容并添加进度条； hidden 不显示超过尺寸的内容；
scroll 总是显示滚动条；对文字起作用。

2、鼠标样式

cursor：pointer 将鼠标样式变为 小手图案； text 鼠标变成输入样式（I） move 鼠标样式变为 十字架图案；default 默认形状（j箭头）；

3、取消线轮廓（输入框外线）

outline ：none ；

4、防止拖拽

resize：none 设置给 textare 控件 ；

5、控制文字与图片对齐

vertical-align：baseline 默认 基线对齐，也就是脚对齐 ；top 顶端对齐；middle 中级对齐；bottom 底部对齐

6、溢出文字隐藏

white-space ： nowrap 强制在同一行内显示所有文字；

7、溢出文字省略显示

text-overflow： clip 简单裁切，不显示省略号；ellipse 多余的文字显示省略号；要强制单行显示，并且和overflow 一起使用。

8、精灵图

本质：将多个小图放在一张大图内，可以少进行网络请求；
主要为背景图；
使用：一张图，不断变换位置，设置为各个控件的背景；即多个控件使用一个图片；
使用属性为 background-position ：x轴位移距离 y轴位移距离

9、滑动门效果

类似于 Android 内的 .9 图片效果；
实现原理：两个图片进行叠加实现，滑动伸缩；
代码实现：一定要 a 嵌套 span；

附赠自己的demo一份 ： Demo_YunDao
效果图如下：

Android 程序员搞 Web 之 CSS（六）