HTML&&CSS-03

cCSS高级技巧

1. 精灵图

1. 精灵技术主要针对背景图片使用，把多个小背景图片整合到一张大图中
2. 这个大图片也成为sprites 精灵图
3. 移动背景图片，background-position
4. 移动的距离就是图片的 x、y轴。
5. 往上、左移动，数值为负值
6. 只用精灵图时要准确测量，每个背景图片的大小和位置

2. 字体图标

1. 应用场景

网页中通用、常用的一些小图标，形式简单

对于复杂的还是使用精灵图

2. 本质：展示的是图标，本质属于字体

3. 使用步骤

1. 下载包中的fonts文件夹放在项目的根目录下

2. 在css中，声明字体

   1. 找到下载文件的style.css文件，赋值粘贴

      @font-face {
        font-family: 'icomoon';
        src:  url('fonts/icomoon.eot?czw4wn');
        src:  url('fonts/icomoon.eot?czw4wn#iefix') format('embedded-opentype'),
          url('fonts/icomoon.ttf?czw4wn') format('truetype'),
          url('fonts/icomoon.woff?czw4wn') format('woff'),
          url('fonts/icomoon.svg?czw4wn#icomoon') format('svg');
        font-weight: normal;
        font-style: normal;
        font-display: block;
      }
      

3. 字体图标不是寻常的字体，是一种特殊的图标，在下载文件的demo中寻找图标

4. 声明字体

    font-family: "icomoon";
   

   4、字体图标的追加

   把压缩包中的selection.json重新上传，然后选择自己想要的新图标，重新下载压缩包，并替换原来的文件即可

   3、CSS三角

.box{
width:0;
height:0;
    line-height:0;
    font-size:0;
    border: 10px solid transparent;
       <--四个三角形组成的 -->
    <--上三角 -->
    
    border-top-color:red;
}

4. 鼠标样式 cursor

cursor：属性；

5. 轮廓线outline

去掉表单的轮廓线 input{outline:0 或者 outline:none}

文本域的边框线和可调节和光标贴着文本域

<textarea style="outline:none; resize:none"></textarea>
开始和结束标签紧挨着，可以让cursor贴着文本域

6. vertical-align 属性

应用：设置图片或者表单（行内块元素）和文字垂直对齐。

2. 解决图片下的空白间隙：
   原因：行内块元素。默认与文字是基线对齐
   1. vertical-align：
   2. display：block

7. 溢出的文字省略号显示

1、单行文本溢出显示省略号

css：
//单行显示
white-space:nowrap;
//文本溢出隐藏
overflow:hidden；
//溢出部分省略号显示
text-overflow:ellipsis;

2、多行文本溢出显示省略号