前端学习从入门到高级全程记录之10 （CSS高级技巧）

最新推荐文章于 2024-06-22 15:13:59 发布

灬银瓶丶

最新推荐文章于 2024-06-22 15:13:59 发布

阅读量447

点赞数

CC 4.0 BY-SA版权

分类专栏：前端 CSS HTML 文章标签：前端 CSS HTML

本文链接：https://blog.csdn.net/zhangbobo1997/article/details/101450473

前端同时被 3 个专栏收录

31 篇文章

订阅专栏

HTML

20 篇文章

订阅专栏

CSS

18 篇文章

订阅专栏

l# 本期目标
来到本期学习的同学注意：难的知识点我们已经学完了，以后将是我们的综合运用，然后还要学习一些高级技巧。

1.元素的显示与隐藏

在CSS中有三个显示和隐藏的单词比较常见，我们要区分开，他们分别是display，visibility和overflow。

他们的主要目的是让一个元素在页面中消失，但是不在文档源码中删除。最常见的是网站广告，当我们点击类似关闭不见了，但是我们重新刷新页面，它们又会出现和你玩躲猫猫！！

display显示

display设置或检索对象是否及如何显示。

display：none隐藏对象与它相反的是display：block除了转换为块级元素外，同时还有显示元素的意思。

特点：隐藏之后，不再保留位置。

练习：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width: 200px;
				height: 200px;
				background-color: pink;
				/*display:显示*/
				display: none;/*隐藏某个元素 == display: block;显示某个元素*/
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

你再加一个盒子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width: 200px;
				height: 200px;
				background-color: pink;
				/*display:显示*/
				display: none;/*隐藏某个元素 == display: block;显示某个元素*/
			}
			p{
				width: 100px;
				height: 100px;
				background-color: purple;
			}
		</style>
	</head>
	<body>
		<div></div>
		<p></p>
	</body>
</html>

会是这样：
在这里插入图片描述
p盒子把上面盒子的位置占了。

visibilty可见性

设置或检索是否显示对象。

visible：对象可视

hidden：对象隐藏

特点：隐藏之后，继续保留原有位置（。停职留薪）

还是之前的代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width: 200px;
				height: 200px;
				background-color: pink;
				/*display:显示*/
				/*display: none;隐藏某个元素 == display: block;显示某个元素*/
				visibility: hidden;/*隐藏某个元素，占有位置*/
			}
			p{
				width: 100px;
				height: 100px;
				background-color: purple;
			}
		</style>
	</head>
	<body>
		<div></div>
		<p></p>
	</body>
</html>

效果却是这样：
在这里插入图片描述
隐藏但同时占有位置。

例子

所需图片：
在这里插入图片描述

当鼠标经过时达成以下效果：

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			a{
				display: block;
				width: 448px;
				height: 252px;
				position: relative;
			}
			.mask{
				width: 100%;
				height: 100%;
				background:rgba(0,0,0,.4) url(images/arr.png) no-repeat center;
				left: 0;
				top: 0;
				position: absolute;
				display: none;/*首先正常情况下是隐藏的*/
			}
			/*鼠标放到a身上,a里面的mask出来*/
			a:hover .mask{
				display: block;/*显示出来*/
			}
			
		</style>
	</head>
	<body>
		<a href="#">
			<img src="images/tudou.jpg" height="252" width="448" alt=""/>
			<div class="mask"></div>
		</a>
	</body>
</html>

overflow溢出

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

visible：不剪切内容也不添加滚动条。

auto：超出自动显示滚动条，不超出不显示滚动条。

hidden：不显示超过对象尺寸的内容，超出的部分隐藏掉。

scroll：不管超出内容否，总是显示滚动条。

先看一个例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width: 200px;
				height: 200px;
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<div>
			文字文字文字文字文字文字文字文字文字文字文字文字文字
			文字文字文字文字文字文字文字文字文字文字文字文字文字
			文字文字文字文字文字文字文字文字文字文字文字文字文字
			文字文字文字文字文字文字文字文字文字文字文字文字文字
			文字文字文字文字文字文字文字文字文字文字文字文字文字
			文字文字文字文字文字文字文字文字文字文字文字文字文字
			文字文字文字文字文字文字文字文字文字文字文字文字文字
			文字文字文字文字文字文字文字文字文字文字文字文字文字
			文字文字文字文字文字文字文字文字文字文字文字文字文字
			
		</div>
	</body>
</html>

效果为：
在这里插入图片描述
文字发生了溢出。

在div里加一行代码：overflow: hidden;
在这里插入图片描述
还可以加一个滚动条解决这个问题：

overflow: scroll;/*滚动条*/

在这里插入图片描述
还有其他一些属性，请自行看上面的知识点。

2.CSS用户界面样式

所谓的界面样式，就是更改一些用户操作样式，比如更改用户的鼠标样式，表单轮廓等。但是比如滚动条的样式改动受到了很多浏览器的抵制，因此我们就放弃了。防止表单域拖拽。

鼠标样式cursor

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

cursor : default 小白 | pointer 小手 | move 移动 | text 文本

鼠标放我身上查看效果哦：

<ul>
  <li style="cursor:default">我是小白</li>
  <li style="cursor:pointer">我是小手</li>
  <li style="cursor:move">我是移动</li>
  <li style="cursor:text">我是文本</li>
</ul>

尽量不要用hand，因为火狐不支持，pointer ie6以上都支持的尽量用

练习：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			li{
				cursor: pointer;/*让我们的鼠标样式变成小手*/
				/*cursor: text;文本样式*/
			}
			p{
				width: 100px;
				height: 100px;
				background-color: pink;
				cursor: move;/*鼠标变成十字架样子*/
			}
		</style>
	</head>
	<body>
		<ul>
			<li>wenzi</li>
			<li>wenzi</li>
			<li>wenzi</li>
			<li>wenzi</li>
			<li>wenzi</li>
			<li>wenzi</li>
		</ul>
		<p></p>
		<ul>
  <li style="cursor:default">我是小白</li>
  <li style="cursor:pointer">我是小手</li>
  <li style="cursor:move">我是移动</li>
  <li style="cursor:text">我是文本</li>
</ul>
	</body>
</html>

轮廓outline

是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

outline : outline-color ||outline-style || outline-width

但是我们都不关心可以设置多少，我们平时都是去掉的。

最直接的写法是：outline：0；或者outline：none；

<input  type="text"  style="outline: 0;"/>

防止拖拽文本域resize

resize：none 这个单词可以防止火狐、谷歌等浏览器随意的拖动文本域。

右下角可以拖拽：

右下角不可以拖拽:

<textarea  style="resize: none;"></textarea>

练习：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			input{
				outline: none;/*取消轮廓线的做法*/
				border: 1px solid #ccc;
				width: 200px;
				height: 25px;
				background: url(images/s.png) no-repeat 180px center;
			}
			textarea{
				resize: none;/*防止拖拽*/
				outline: none;/*取消蓝色边框*/
			}
		</style>
	</head>
	<body>
		<input type="text" name="" id="" value="" />
		<textarea name="" rows="10" cols="30"></textarea>
	</body>
</html>

vertical-align垂直对齐

以前我们讲过让带有宽度的块级元素居中对齐，是margin：0 auto；

以前我们还讲过让文字居中对齐，是text-align：center；

但是我们从来没有讲过有垂直居中的属性，我们的不知道垂直居中怎么做。

vertical-align垂直对齐，这个看上去很美好的一个属性，实际有着不可捉摸的脾气，否则我们也不会这么晚来讲解。
在这里插入图片描述

vertical-align : baseline |top |middle |bottom

设置或检索对象内容的垂直对齐方式。

vertical-align 不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素，特别是行内块元素，通常用来控制图片/表单与文字的对齐。
在这里插入图片描述

图片、表单和文字对齐

所以我们知道，我们可以通过vertical-align控制图片和文字的垂直关系了。默认的图片会和文字基线对齐。

去除图片底侧空白缝隙

有个很重要特性你要记住：图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。这样会造成一个问题，就是图片底侧会有一个空白缝隙。

解决的方法就是：
1.给img vertical-align：middle|top等等。让图片不要和基线对齐。
在这里插入图片描述
2.给img 添加display：block；转换为块级元素就不会存在问题了。

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				border: 2px solid red;
			}
		</style>
	</head>
	<body>
		<div>
			<img src="images/tudou.jpg" height="252" width="448"/>
			my name is Tom
		</div>
	</body>
</html>

效果为：
在这里插入图片描述
可以看到图片与边框有缝隙，这是因为图片对准字母的基线导致。

那么在样式里加入垂直底部对齐:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			img{
				vertical-align: bottom;
			}
			div{
				border: 2px solid red;
			}
		</style>
	</head>
	<body>
		<div>
			<img src="images/tudou.jpg" height="252" width="448"/>
			my name is Tom
		</div>
	</body>
</html>

效果为：
在这里插入图片描述
当然，也可以加入垂直居中对齐vertical-align: middle;。

2.溢出的文字隐藏

word-break：自动换行

normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。
主要处理英文单词

white-space

white-space设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容

normal：默认处理方式
nowrap：强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。

可以处理中文

text-overflow文字溢出

text-overflow:clip | ellipsis

设置或检索是否使用一个省略标记（…）标示对象内文本的溢出

clip：不显示省略标记（…），而是简单的裁切。

ellipsis：当对象内文本溢出时显示省略标记（…）

注意一定要首先强制一行内显示，再次和overflow属性，搭配使用

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width: 200px;
				height: 30px;
				border: 1px solid pink;

			}
		</style>
	</head>
	<body>
		<div>文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容</div>
	</body>
</html>

效果是这样的：
在这里插入图片描述
那么，加入这一行代码：white-space: nowrap;/*强制在同一行内显示所有文本,直到文本结束或者遭遇br标签对象才换行*/

那么超出部分是可以隐藏的：

div{
				width: 200px;
				height: 30px;
				border: 1px solid pink;
				white-space: nowrap;/*强制在同一行内显示所有文本,直到文本结束或者遭遇br标签对象才换行*/
			    overflow: hidden;/*超出部分隐藏*/
			}

在这里插入图片描述
当然，这样有可能让文字显示不完整，那么可以用溢出文字隐藏：

div{
				width: 200px;
				height: 30px;
				border: 1px solid pink;
				white-space: nowrap;/*强制在同一行内显示所有文本,直到文本结束或者遭遇br标签对象才换行*/
			    overflow: hidden;/*超出部分隐藏*/
			   text-overflow: ellipsis;/*溢出文字隐藏*/
			}

在这里插入图片描述
注意，如果想要达成上图效果，那么：white-space: nowrap;/*强制在同一行内显示所有文本,直到文本结束或者遭遇br标签对象才换行*/ overflow: hidden;/*超出部分隐藏*/ text-overflow: ellipsis;/*溢出文字隐藏*/
这三句，一句都不能少！！

3.CSS精灵技术（sprite）小妖精雪碧

精灵技术产生的背景

在这里插入图片描述
图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。

然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。

精灵技术本质

简单地说，CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。通常情况下，这个由很多小的背景图像合成的大图被称为精灵图（雪碧图），如下图所示为京东网站中的一个精灵图。
在这里插入图片描述

精灵技术的使用

CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位，其中最关键的是使用background-position属性精确地定位。

制作精灵图

CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），那我们要做的，就是把小图拼合成一张大图。

大部分情况下，精灵图都是网页美工做。

我们精灵图上放的都是小的装饰性质的背景图片。插入图片不能往上放。
我们精灵图的宽度取决于最宽的那个背景。
我们可以横向摆放也可以纵向摆放，但是每个图片之间，间隔至少隔开偶数像素合适。
在我们精灵图的最低端，留一片空隙，方便我们以后添加其他精灵图。

结束语：小公司，背景图片很少的情况，没有必要使用精灵技术，维护成本太高。如果是背景图片比较多，可以建议使用精灵技术。

例子：
我在王者荣耀官网找到了“下载游戏”按钮，它的背景图片其实是一个很大的图片，上面还有其他的图片：
在这里插入图片描述
那么，我们来实现一个小图标和新人专区，都使用同一个照片：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			h3{
				background: url(images/index.png) no-repeat -2px -184px;
				width: 26px;
				height: 26px;
			}
			div{
				width: 236px;
				height: 106px;
				background: url(images/index.png) no-repeat 0 -350px;
			}
		</style>
	</head>
	<body>
		<h3></h3>
		<div></div>
	</body>
</html>

效果图：
在这里插入图片描述
这里用到的背景图的精准定位很重要，把背景移动到你想要的位置，就能显示特定的图片。因为默认左上角对齐，背景是往下移，所以坐标都是负的。
拼出自己的名字
现在来做一个练习：

用上图来拼出自己的名字，字母的大小和位置用PS量出，这里就不再赘述了，先给一个模板：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			span{
				display: inline-block;
				background: url(images/abcd.jpg) no-repeat;
			}
			.aa{
				width: 108px;
				height: 110px;
				background-position: 0 -9px;
			}
			.n{
				width: 112px;
				height: 110px;
				background-position: -255px -276px;
			}
		</style>
	</head>
	<body>
		<span class="aa"></span>
		<span class="n"></span>
	</body>
</html>

在这里插入图片描述
尝试自己拼出自己的名字！

4.滑动门

先来体会下现实的滑动门，或者你可以叫做推拉门：
在这里插入图片描述

滑动门出现的背景

制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，比如微信号导航栏，有凸起和凹下去的感觉，最大的问题是里面的字数不一样，怎么办？
在这里插入图片描述
为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。最常见于各种导航栏的滑动门

核心技术

核心技术就是利用CSS精灵（主要是背景位置）和盒子padding撑开宽度，以便能适应不同字数的导航栏。一般的经典布局都是这样的：

<li>
  <a href="#">
    <span>导航栏内容</span>
  </a>
</li>

总结：
1.a 设置背景左侧，padding撑开合适宽度。
2.span 设置背景右侧，padding撑开合适宽度，剩下由文字继续撑开宽度。
3.之所以a包含span就是因为整个导航都是可以点击的。

练习：
所需图片：
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			a{
				margin: 100px;
				height: 33px;
				display: inline-block;
				background: url(images/to.png) no-repeat;
				color: #fff;
				text-decoration: none;
				line-height: 33px;
				padding-left: 15px;
			}
			span{
				display: inline-block;
				height: 33px;
				background: url(images/to.png) no-repeat right;
				padding-right: 15px;
			}
		</style>
	</head>
	<body>
		<a href="#">
			<span>首页</span>
		</a>
	</body>
</html>

效果：
在这里插入图片描述
增加文字内容，背景会适当的撑开。

微信滑动门

微信官网效果：
在这里插入图片描述
所需图片：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.nav li{
				float: left;
				list-style: none;
				margin-left: 30px;
			}
			body{
				background: url(images/wx.jpg) repeat-x;
			}
			.nav a{
				/*a 左边放左圆角,但是文字需要往右走15px*/
				height: 33px;
				line-height: 33px;
				color: #fff;
				text-decoration: none;
				background: url(images/to.png) no-repeat;
				display: inline-block;
				padding-left: 15px;
			}
			.nav span{
				/*span右边放右圆角,但是文字需要往左走15px*/
				background: url(images/to.png) no-repeat right;
				display: inline-block;
				height: 33px;
				padding-right: 15px;
			}
			.nav a:hover{
				background-image: url(images/ao.png);
			}
			.nav a:hover span{/*鼠标经过之后,span凹下去*/
				background-image: url(images/ao.png);
			}
			
			/*也可以将上面简写:
			.nav a:hover,.nav a:hover span{
				background-image: url(images/ao.png);
			}*/
		</style>
	</head>
	<body>
		<ul class="nav">
			<li>
				<a href="#">
					<span>首页</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span>首页</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span>首页</span>
				</a>
			</li>
		</ul>
	</body>
</html>