CSS 笔记 精灵图 字体图标 三角 鼠标样式 取消文本边框和大小 图片文字水平居中 文字省略显示/加滚动条

一.精灵图

精灵图就是将一些小的图普安不整合到一张大的图片上
到时候要使用哪个图，就从这个大的图片上面截取就行了
类似于纸膜

我们将背景图放在盒子中
盒子显示的图一开始再图片的左上角
使用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;

}

背景图是这个

最后显示的是

二.字体图标

使用字体图标，放大时不会失真

网站图标网站

选择好以后选择生成图标

1. 下载好压缩包以后，解压
   找到文件
   打开后 复制第一段被覆盖的内容到自己的 css文件中

2. 在html中生成一个盒子
   打开文件
   
   找到想要的图标，复制右边的方框 “口”到span中

3. 在盒子中写一个类，在类中引入字体家庭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