CSS学习16--CSS高级技巧：用户界面样式、精灵技术、字体图标、滑动门

CSS高级技巧

一、用户界面样式
- [1. 鼠标样式cursor](#1. 鼠标样式cursor)
- [2. 轮廓outline](#2. 轮廓outline)
- 3.防止拖拽文本域resize
- [4.vertical-align 垂直对齐](#4.vertical-align 垂直对齐)
- [5. 去除图片底侧空白缝隙](#5. 去除图片底侧空白缝隙)
- [6. 溢出文字隐藏](#6. 溢出文字隐藏)
二、精灵技术sprite
- [1. 精灵技术产生背景](#1. 精灵技术产生背景)
- [2. 精灵技术的本质](#2. 精灵技术的本质)
- [3. 精灵技术的使用](#3. 精灵技术的使用)
- [4. 制作精灵图](#4. 制作精灵图)
三、字体图标
- [1. 字体图标优点](#1. 字体图标优点)
- [2. 字体图标使用流程](#2. 字体图标使用流程)
- [3. 追加新图标](#3. 追加新图标)
四、滑动门
- [1. 滑动门的背景](#1. 滑动门的背景)
- [2. 核心技术](#2. 核心技术)
- [3. 技术实现](#3. 技术实现)

一、用户界面样式

所谓界面样式就是更改一些用户操作样式，比如更改用户的鼠标样式、表单轮廓等。

1. 鼠标样式cursor

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

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

html 复制代码

<html>
	<head>
		<title>鼠标</title>
	</head>
	<body>
	<ul>
		<li style="cursor: default;">小白</li>
		<li style="cursor: pointer;">小手</li>
		<li style="cursor: text;">文本</li>
		<li style="cursor: move;">移动</li>
	</ul>
	</body>
</html>

2. 轮廓outline

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

html 复制代码

<html>
	<head>
		<title>鼠标</title>
		<style>
			input{
				outline: 1px solid red;
				outline: 0; /*取消轮廓线*/
				border: 1px solid blue;
			}
		</style>
	</head>
	<body>
	<input type="text">
	</body>
</html>

3.防止拖拽文本域resize

html 复制代码

<html>
	<head>
		<title>resize</title>
		<style>
			textarea{
				resize: none; /*防止文本域拖拽*/
				outline: none; /*取消轮廓*/
				width: 100px;
				height: 200px;
				border: 1px solid pink;
				background-color: #f6e7f7;
			}
		</style>
	</head>
	<body>
	<p>下面是文字</p>
	<textarea name="" id=""></textarea>
	</body>
</html>

4.vertical-align 垂直对齐

带有宽度块级元素居中对齐：margin: 0 auto;
文字居中对齐： text-align: center;
垂直居中：设置或检索对象内容的垂直对齐方式。

vertical-align不影响块级元素中内容的对齐，只针对行内元素或行内块元素，通常用来控制图片/表单与文字的对齐。

html 复制代码

<html>
	<head>
		<style>
			div {
				width: 200px;
				height: 200px;
				background-color: pink;
				margin-left: auto;
				margin-right: auto; /*盒子水平*/
				text-align: center; /*文字水平居中*/
				vertical-align: middle; /*对于块级元素无效*/
			}
			img {
				vertical-align: baseline; /*默认基线对齐*/
				vertical-align: middle; /*中线对齐*/
			}
		</style>
	</head>
	<body>
	<div>文字居中</div>
	<hr>
	<img src="images/id.png" alt="" > 12345 <!--图片和文字默认基线对齐-->
	</body>
</html>

5. 去除图片底侧空白缝隙

有一个很重要的特性：图片或者表单等行内块元素，他们的底会和盒子的基线对齐，存在空白缝隙。

解决方法：

转换为块元素；

给img的vertical-align属性值为middle或者top，用的最多；

html 复制代码

<html>
	<head>
		<style>
			div {
				width: 200px;
				height: 200px;
				background-color: pink;
			}
			img {
				display: block;
				vertical-align: middle;
			}
		</style>
	</head>
	<body>
	<div>
		<img src="#.png" alt="" > 12345 <!--图片和文字默认基线对齐-->
	</div>
</html>

6. 溢出文字隐藏

（1）word-break 自动换行

normal 使用浏览器默认换行规则

break-all 允许在单词内换行

keep-all 只能在半角空格或连字符处换行

html 复制代码

<html>
	<head>
		<style>
			div {
				width: 120px;
				height: 30px;
				background-color: pink;
				word-break: break-all;
				/*允许单词拆分*/
				word-break: keep-all; 
				/*不允许拆开单词显示，连字符特殊 -*/
			}
		</style>
	</head>
	<body>
	<div>
		my name is andy
	</div>
</html>

（2）white-space

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

normal 默认处理方式

nowrap 强制在同一行内显示所有文本，直到文本结束或遇到br标签换行

（3）text-overflow 文字溢出

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

clip 不显示省略标记（...），而是简单的裁剪

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

注意：使用一定要强制一行内显示，再次和overflow搭配使用！

html 复制代码

<html>
	<head>
		<style>
			div {
				width: 120px;
				height: 30px;
				background-color: pink;
				white-space: nowrap;/*首先强制一行内显示*/
				text-overflow: ellipsis;
				overflow: hidden; /*再次搭配使用*/
			}
		</style>
	</head>
	<body>
	<div>
		我的名字是安迪
	</div>
</html>

二、精灵技术sprite

1. 精灵技术产生背景

为了减少服务器接收和发送清秀的次数，提高页面加载速度，出现了CSS精灵技术。

2. 精灵技术的本质

是一种处理网页背景图像的方式，将一个页面涉及的所有背景图片集中到一张大图上，将大图应用与网页。这样当用户访问该页面时只需要发送一次请求，网页中的背景图片都可以显示出来。合成的大图成为精灵图（雪碧图）。

3. 精灵技术的使用

html 复制代码

<html>
	<head>
		<style>
			div {
				width: 17px;
				height: 13px;
				background-color: pink;
				background: url(images/jd.jpg) no-repeat;
				background-position: 0 -388px;
			}
		</style>
	</head>
	<body>
	1. 插入图片 margin padding float position 移动图片 width 大小
	2. 背景图片 background 来控制 size 大小 background-position 位置
	<div>
	</div>
</html>

4. 制作精灵图

当背景图片较多时，运用ps技术制作精灵图。

注意一般不包括插入图片。

三、字体图标

一般的图片会增加总文件大小，额外增加http请求，不能缩放。因此应运而生了字体图标。

1. 字体图标优点

可以做和图片一样的事情，改变透明度、旋转度等
本质是文字，可以随意改变颜色、产生阴影、透明效果
本身体积更小，携带信息未缩减
几乎支持所有浏览器
移动端设备必备

2. 字体图标使用流程

字库网页：icomoon icofont.cn

UI设计svg文件
前端上传兼容性字体文件包
前端下载到本地

把字体引入HTML页面中

第一步：在样式里声明字体

html 复制代码

@font-face{
	font-family: "iconfont"; 
	src: url('../fonts/iconfont.woff2?t=1648085640271') format('woff2'),
   	url('../fonts/iconfont.woff?t=1648085640271') format('woff'),
   	url('../fonts/iconfont.ttf?t=1648085640271') format('truetype');
	font-weight: normal;
	font-style: normal;
}

第二步：给盒子使用字体

html 复制代码

span{
	font-family: "icomoon";
}

第三步：盒子里面添加结构

html 复制代码

<style>
	span::before {
		font-family: "icomoon";
		color: pink;
		content: '\e91b';
	}
</style>
或者
<span><!--复制小图标--></span>

3. 追加新图标

selection.json

四、滑动门

1. 滑动门的背景

为了网页美观，常常需要为网页元素设置特殊形状的背景。为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术，常见于导航栏。

2. 核心技术

核心技术是利用CSS精灵（主要是背景位置）和盒子padding撑开宽度，可以设计导航栏。

一般的经典布局是这样的：

html 复制代码

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

总结：

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

3. 技术实现

html 复制代码

<html>
	<head>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			a {
				display: inline-block;
				height: 33px;/*千万不能给宽度*/
				background: url(#.png) no-repeat;
				padding-left: 15px;
				text-decoration: none;
				line-height: 33px;
			}
			a span {
				display: inline-block;
				height: 33px;
				background: url(#.png) no-repeat;
				padding-right: 15px;
			}
		</style>
	</head>
	<body>
	<a href="">
		<span>首页</span>
	</a>
</html>