一、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一份 :