一.精灵图
精灵图就是将一些小的图普安不整合到一张大的图片上
到时候要使用哪个图，就从这个大的图片上面截取就行了
类似于纸膜
我们将背景图放在盒子中 盒子显示的图一开始再图片的左上角 使用background：url（） no-repeat 背景图横向移动像素 背景图纵向移动像素
注：是背景图移动
* {padding: 0px;margin: 0px;}.father {position: relative;width: 200px;height: 200px;margin: 100px auto;background-color: blue;background: url(images/background.jpg) no-repeat -150px -150px;}
背景图是这个
最后显示的是
二.字体图标
使用字体图标，放大时不会失真
网站图标网站
选择好以后选择生成图标
下载好压缩包以后，解压
找到文件
打开后 复制第一段被覆盖的内容到自己的css文件中
在html中生成一个盒子
打开文件
找到想要的图标，复制右边的方框 “口”到span中
在盒子中写一个类，在类中引入字体家庭font-family: 'icomoon';
然后可以在这个类中设置图标的大小，颜色等字体属性
* {padding: 0px;margin: 0px;}@font-face {font-family: 'icomoon';src: url('fonts/icomoon.eot?pl94jc');src: url('fonts/icomoon.eot?pl94jc#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?pl94jc') format('truetype'),url('fonts/icomoon.woff?pl94jc') format('woff'),url('fonts/icomoon.svg?pl94jc#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;}.apple {font-family: 'icomoon';font-size: 36px; }.xbox {font-family: 'icomoon';font-size: 50px;color: greenyellow;}
三.三角
* {padding: 0px;margin: 0px;}.sanjiao {width: 0;height: 0;/* 像素控制左右长度，且设置为透明*/border: 100px solid transparent;/* 像素控制上下长度 */border-top: 100px solid turquoise;margin: 100px auto;}
四.鼠标样式
使用style= "cursor=特定值"
<ul><li style="cursor: pointer"> 手</li><li style="cursor: move">移动</li><li style="cursor: text">文本</li><li style="cursor: not-allowed">禁止</li></ul>
五.取消文本边框和大小
取消outline：none
取消设置文本域大小resize：none
<input type="text"><textarea name="" id="" cols="30" rows="10"></textarea>
input,textarea {outline: none;}textarea {resize: none;}
六.图片文字水平居中
在图片元素中使用vertical-align: middle;
实现文字和图片居中对齐
还有别的属性
注：如果将图片放在盒子中，只要不使用基线对齐，就不会产生图片下方有空白缝隙的问题
<img src="images/p.png" alt="">好激动
img {vertical-align: middle;}
七.文字省略显示
.mytext {width: 100px;height: 100px;background-color: skyblue;margin: 100px auto;/* 强制一行显示 */white-space: nowrap;/* 溢出部分隐藏 */overflow: hidden;/* 出现省略号 */text-overflow: ellipsis;}
如果想要添加滚动条
使用overflow：aoto
CSS 笔记 精灵图 字体图标 三角 鼠标样式 取消文本边框和大小 图片文字水平居中 文字省略显示/加滚动条
