爱站程序员基地前端学习记录11-CSS-元素隐藏，鼠标样式，轮廓线，拖拽
- 元素隐藏
- display(设置或检索对象是否以及如何显示)
- visibility(可见性)
- overflow(溢出or滚动条)
- 使用隐藏来制作网页鼠标悬停出现播放按钮效果
元素隐藏
使用场景：
1.网站的广告 点x之后就没了
2.配合定位 有一些鼠标在物体上就显示的小窗口 (下拉菜单特效)
3.视频网站上播放视频鼠标移动上去显示一个播放按钮有个浅黑色背景覆盖在视频预览图上
4.你想咋用就咋用
display(设置或检索对象是否以及如何显示)
display:none;
隐藏对象 并且不再保留位置
display:block;
在此处的作用为显示元素，block不光可以让元素转换为块级元素
visibility(可见性)
隐藏的对象 保留位置
主要在js特效中使用 页面布局最好不用 因为空出了位置
| 属性值 | 说明 |
|---|---|
| inherit | 继承父元素的可见性(默认属性 基础为可见) |
| visible | 可视 |
| hidden | 隐藏 |
| collapse | 表格上隐藏行或列(此属性不常用，这东西需求相对较小)基本等同于hidden但常用于表格 |
overflow(溢出or滚动条)
主要使用的目的是控制盒子中存在的文字 基本不用忒难看
并且不同浏览器的滚动条不一样
可清除浮动但清除浮动最好不用这个
| 属性值 | 说明 |
|---|---|
| visible | 不剪切内容 不添加滚动条(默认属性) |
| hidden | 不显示超过对象尺寸的内容 超出部分隐藏 |
| scroll | 总显示滚动条 无论内容多少 (难看) |
| auto | 超出尺寸自动显示滚动条 不超出不显示 |
使用隐藏来制作网页鼠标悬停出现播放按钮效果
效果如下图：
<div class=\"video-links\"><a href=\"#\"><div class=\"video-links-mask\"></div><img src=\"images/tudou.jpg\"><a href=\"#\" class=\"video-links-font\">外国一小伙研制出小型遥控阿帕奇飞机</a></a></div>
*{margin: 0;padding: 0;}.video-links{position: relative;display: block;margin: 100px auto;width: 448px;height: 300px;border: 1px solid rgba(204, 204, 204, 0.3);}.video-links-mask{display: none;position: absolute;top: 0;left: 0;width: 448px;height: 252px;background: rgba(0, 0, 0, 0.3) url(\'images/arr.png\') no-repeat centecenter;}.video-links a{color: #000;text-decoration: none;}.video-links a p{font-size: 14px;margin: 5px 0 0 15px;.video-links a:hover{color: orange;.video-links a:hover .video-links-mask{display: block;.video-links a img{margin-bottom: 10px;.video-links-font{margin-left: 15px;}
cursor(鼠标样式)
以下只列举了常用样式，还有很多鼠标样式请看开发手册
| 属性值 | 说明 |
|---|---|
| default | 默认样式 鼠标指针 |
| pointer | 访问链接等可点击的地方时出现的小手 |
| move | 移动拖拽时出现的十字键头 |
| text | 文本输入时出现的文本指针 |
| not-allowed | 禁止指针样式 |
outline(轮廓线)
此样式类似于边框，通常出现在表单中，表单元素基本都自带轮廓线
outline-color:颜色;
outline-style:样式;
outline-width:宽度;
一般使用场景是清除表单的轮廓线可使用
outline:0;
或
outline:none;
resize(拖拽元素)
使用此样式的元素必须存在
overflow
属性才可生效
| 属性值 | 说明 |
|---|---|
| none | 不允许用户拖拽元素 |
| both | 用户可调整元素宽度和高度 |
| horizontal | 用户可调整元素宽度 |
| vertical | 用户可以调整元素高度 |
一般的使用场景都是防止用户拖拽使用文本域
textarea
制作的评论或其他的功能性表单
因为
textarea
自带
overflow
属性 所以可以直接使用
resize:none;
来防止用户拖拽文本域
