前端学习记录11-CSS-(元素隐藏，鼠标样式，轮廓线，拖拽)

元素隐藏

使用场景：
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; 来防止用户拖拽文本域