CSS高级技巧精灵图使用

1. 精灵图

目的：为了有效地减少服务器接收和发送请求的次数，提高也页面的加载速度

核心原理：将网页的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了

1.1 精灵图(sprites)的使用

• 精灵技术主要针对于小背景图片使用，就是把多个小背景图片整合到一张大图片中
• 这个大图片成为精灵图 、spites 或者 雪碧图
• 移动背景图片位置，此时可以使用background-position
• 移动的距离就是这个目标图片的x和y坐标，x轴右边移动是正值，左边移动是负值
• 因为一般情况下都是往上往左移动，所以一般情况下数值为负值
• 使用精灵图的时候需要精确测量，每个小背景图片的大小和位置

<style>
    span {
        display: inline-block;
    }
</style>
<span class="h">h</span>
<span class="m">m</span>
<span class="q">q</span>

1.2 字体图标

字体图标(iconfont)所展示的是图标，其本质属于字体

字体图标的下载

• icomoon 字库 http://icomoon.io
• 阿里 iconfont 字库 http://www.iconfont.cn/

字体图标的引入

1. 把下载包里面的 fonts 文件夹放入页面根目录下
2. 在CSS样式中全局声明字体：把这些字体文件通过css引入到页面中

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

3. HTML标签内添加小图标

<span>  /*复制小图标*/</span>

4. CSS标签内

span {
    font-family: 'icomoon';
    font-size: ;
    color: ;
}

字体图标的追加

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

1.3 CSS三角

.jd span {
    position: absolute;
    right: 15px;
    top: -10px;
    width: 0;
    height: 0;
    /*为了照顾兼容性*/
    line-height:0;
    font-size: 0;
    /**/
    border: 5px solid transparent;
    border-bottom-color: pink;
}

1.4 CSS用户界面

鼠标样式 cursor

当鼠标移动到某个对象上所显示出来的光标形状

属性值	描述
default	小白 默认
pointer	小手
move	移动
text	文本
not-allowed	禁止

轮廓线 outline

给表单添加 outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框

input {
    outline: none;
}

防止拖拽文本域 resize

textarea {resize: none;}  /*写在一行上*/

2. vertical-align属性应用

用于设置图片或者表单(行内块元素)和文字垂直对齐，但是它只针对于行内元素或者行内块元素有效

值	描述
baseline	默认，元素放置在父元素的基线上
top	把元素的顶端于行中最高元素的顶端对齐
middle	把此元素放置在父元素中部
bottom	把元素的顶端与行中最低元素的顶端对齐

图片、表单和文字对齐

图片、表单都属于行内块元素，默认的vertical-align是基线对齐，此时改成middle就行

解决图片底部默认空白空隙问题

图片底侧会有一个空白缝隙，行内块元素会和文字的基线对齐

• 给图片添加vertical-align: middle | top | bottom等
• 把图片转换为块级元素 display: block;

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

1. 单行文本溢出显示省略号，需满足3个条件:

   a. 先强制一行内显示文本 white-space: nowrap; (默认normal自动换行)

   **b. **超出的部分隐藏 overflow: hidden;

   c. 文字用省略号替代超出的部分 text-overflow: ellipsis;

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

   适合webKit浏览器或移动端(移动端大部分是webkit内核)

   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2;  /*限制一个块元素显示的文本行数*/
   -webkit-box-orient: vertival; 
   

4.布局技巧

a. margin负值运用

压住相邻盒子边框 margin-left: -1px;

鼠标经过某个盒子的适合，提高当前盒子的层级即可( 如果没有定位，则加相对定位(保留位置)，如果有定位，则加z-index )

ul li:hover {
    /*如果盒子没有定位*/
    position: relative;
    border: 1px solid pink;
    /*如果盒子有定位*/
    z-index: 1;
}

b. 文字围绕浮动元素

c. 行内块应用

d. CSS 三角

左边和下面的边框设置为0，上边框调大

i {
    width: 0;
    height: 0;
    border-color: transparent #fff transparent transparent;
    border-style: solid;
    border-width: 22px 8px 0 0;
}

5. CSS的初始化

每个网页都必须首先进行CSS初始化