CSS高级技巧(显示和隐藏，精灵技术)

最新推荐文章于 2024-07-19 10:49:05 发布

一麻袋小猫

最新推荐文章于 2024-07-19 10:49:05 发布

阅读量493

点赞数 1

CC 4.0 BY-SA版权

文章标签： css html5 html css3

本文链接：https://blog.youkuaiyun.com/Zmongo/article/details/104121318

本文深入探讨CSS中文字不可选、元素的显示与隐藏、overflow溢出处理、半透明背景加小图片效果、hover样式控制及精灵技术应用，提供丰富的代码实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

设置css中文字不可选

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

CSS的最后一天了，come on!

元素的显示与隐藏
作用场景：类似网站广告，点击不见，但重新刷新页面就出现了

display:none; 先隐藏元素再不保留位置。相当于离职

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.one {
			/*隐藏对象*/
			/*先隐藏元素再不保留位置*/
			display: none; 
			/*除了转换为块级元素之外，还可以显示元素*/
			display: block;
			width: 200px;
			height: 200px;
			background-color: pink;

		}
		.two {
			width: 250px;
			height: 250px;
			background-color: purple;
		}
	</style>
</head>
<body>
	<div class="one"></div>
	<div class="two"></div>
</body>
</html>

visibility 隐藏相当于停职留薪
visibility:hidden隐藏元素，保留位置，与display对比；;

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.one {
			/*visibility:hidden隐藏元素，保留位置，与display对比；;*/
			visibility: hidden;
			/*显示*/
			visibility: visible;
			width: 200px;
			height: 200px;
			background-color: pink;

		}
		.two {
			width: 250px;
			height: 250px;
			background-color: purple;
		}
	</style>
</head>
<body>
	<div class="one"></div>
	<div class="two"></div>
</body>
</html>

overflow 溢出
默认：visible 超出部分不剪切也不隐藏
hidden 溢出隐藏，把超出盒子大小的部分隐藏起来。
overflow: scroll; 添加滚动条，但不常用
overflow: auto; 如果超出显示滚动条，如果不超出不显示滚动条，但不经常用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			/*overflow: hidden;*/
			/*显示滚动条：不会超出盒子大小，不能显示全，但很丑，不用*/
			/*overflow: scroll;*/
			/*如果超出显示滚动条，如果不超出不显示滚动条，但不经常用*/
			overflow: auto;
			width: 100px;
			height: 100px;
			border: 1px solid red;
	}
	</style>
</head>
<body>
	<div>
		我爱学习，
		我爱学习，
		我爱学习，
		我爱学习，
		<!-- 我爱学习，
		我爱学习，

		我爱学习，
		我爱学习，

		我爱学习，
		我爱学习，
		我爱学习， -->
	</div>
</body>
</html>

半透明背景加小图片，重点是属性顺序

	background:rgba(0,0,0,.3) url(images/arr.png) no-repeat
			center center;

hover的顺序，当鼠标经过时，mask显示出来。
一定一定要注意：a:hover后可以空格添加子代，从未准确对样式进行控制

/*后代选择器，当鼠标经过a时，里面的mask显示出来*/
		.box a:hover .mask{
			
		}

鼠标经过图片有半透明盒子出现

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/*1.原来盒子里装了一个黑色半透明的盒子 刚开始看不见
		2. 当鼠标经过的时候  盒子显示出来*/
		.box {
			width: 222px;
			height: 220px;
			margin: 100px;
			position: relative;
		}
		.mask {
			position: absolute;
			top: 0;
			left: 0;
			display: none;
			width: 222px;
			height: 220px;
			background:rgba(0,0,0,.3) url(images/arr.png) no-repeat
			center center;

		}
		/*2. 当鼠标经过的时候  盒子显示出来*/
				/*后代选择器，当鼠标经过a时，里面的mask显示出来*/
		.box a:hover .mask{
			display: block;
		}

	</style>
</head>
<body>
	<div class="box">
		<a href="#"><div class="mask"></div>
		<img src="images/3.jpg" alt=""></a>
		
	</div>
</body>
</html>

在这里插入图片描述
用精灵技术拼写喜欢的人的名字：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			background: url(images/abcd.jpg) no-repeat;
			float: left;
			margin-left: 20px;
		}
		.l {
			width: 101px;
			height: 110px;
			background-position: 0 -270px;
			
		}
		.a {
			width: 110px;
			height: 110px;
			background-position: 0 0;
		}
		.n {
			width: 110px;
			height: 110px;
			background-position: -257px -270px;
		}
		.h {
			width: 110px;
			height: 108px;
			background-position: -213px -146px;
		}
		.a2 {
			width: 110px;
			height: 110px;
			background-position: 0 0;
		}
		.i {
			width: 66px;
			height: 110px;
			background-position: -323px -146px;
		}
	</style>
</head>
<body>
	<!-- pink -->
	<div class="l"></div>
	<div class="a"></div>
	<div class="n"></div>
	<div class="h"></div>
	<div class="a2"></div>
	<div class="i"></div>
</body>
</html>