397day（模式转换复习，例子练习，显示隐藏）

最新推荐文章于 2021-07-17 16:06:14 发布

原创最新推荐文章于 2021-07-17 16:06:14 发布 · 135 阅读

CC 4.0 BY-SA版权

本文探讨了使用CSS进行布局的技巧，包括如何利用float和position属性使元素自动转换为inline-block，实现盒子的排列。同时，介绍了display:none与visibility:hidden的区别，前者隐藏元素且不保留位置，后者隐藏元素但保留其原有空间。通过具体代码实例，展示了hover状态下元素边框颜色变化及相对定位的调整，以及如何创建一个视频界面，利用绝对定位和伪类:hover来控制遮罩层的显示与隐藏。

《2018年11月4日》【连续397天】

标题：模式转换复习，例子练习，显示隐藏；

内容：

/* flaot , postion 自动转换为inline-block */

< !--盒子排列 -->
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		div {
			width: 250px;
			height: 400px;
			border: 1px solid #ccc;
			float: left;
			margin-left: -1px;
			/*position: relative;*/
		}

		div:hover {
			border: 1px solid #f40;
			position: relative;
			/*z-index: 1*/
		}
	</style>
</head>
<body>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</body>

display: none; /*隐藏，不保留位置*/
visibility: hidden/visible  /*隐藏，显示，保留位置*/

视频界面：

<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		a {
			width: 448px;
			height: 252px;
			display: block;
			position: relative;
		}

		.mask {
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,0.4) url(images/arr.png) no-repeat center;
			position: absolute;
			top: 0;
			left: 0;
			display: none; /*初始隐藏*/
		}

		a:hover .mask {
			display: block;  /*显示*/
		}
		
	</style>
</head>
<body>
	<a href="#">
		<img src="images/tudou.jpg" width="448" height="252" alt="">
		<div class="mask">
		</div>
	</a>
</body>