四、CSS高级技巧

1.精灵图：

    1.1为什么需要精灵图？
        为了有效减少服务器接收和发送请求的次数，提高页面的加载速度。
        核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。
    1.2精灵图的使用：
        （1）精灵技术主要针对于背景图片的使用。就是把多个小背景图片整合到一张大图片中。
        （2）这个大突破也称为sprites 精灵图/雪碧图。
        （3）移动背景图片位置，此时可以使用background-position。
        （4）移动的距离就是这个目标图片的x和y坐标。注意网页中的坐标有所不同。
        （5）因为一般情况下都是往上往左移动，所以数值是负值。
        （6）使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。
    1.3精灵图的缺点：
        （1）图片文件大。
        （2）图片本身放大和缩小会失真。
        （3）图片制作完毕后更换复杂。

2.字体图标：

    2.1字体图标的产生：
        为了解决精灵图的缺点。字体图标iconfont。
        字体图标使用场景：主要用于显示网页中通用、常用的一些小图标。
        字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。
    2.2字体图标的优点：
        轻量级、灵活性、兼容性。
        注意：字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。
    2.3精灵图与字体图标的使用场景对比：
        结构/样式简单的小图标，就用字体图标。
        结构/样式复杂的小图片，就用精灵图。

3.CSS三角的做法：

            .box2 {
            width: 0;
            height: 0;
            border: 100px solid transparent;
            border-left-color: yellow;
            margin: 100px auto;
        }                 //朝右的三角形, 宽、高必定是为0。

4.CSS用户界面样式

    4.1鼠标样式cursor
        属性值：default；小白 默认
        pointer：小手
        move：移动
        text：文本
        not-allowed：禁止
    4.2轮廓线outline
        给表单添加outline:0/none;样式之后，就可以去掉默认的蓝色边框了。
                input {
            outline: none;
        }
    4.3防止拖拽文本域resize
                textarea {
            resize: none;
        }

5.vertical-align属性应用：

    使用场景：设置图片、表单和文字对齐。（默认是基线对齐）
    官方解释：用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。
    baseline、top、mideele、bottom
    解决图片底侧空白缝隙：（原因是行内块元素会和文字的基线对齐）
        1.给图片添加vertical-align: middle/top/bottom;（提倡使用的）
        2.把图片转换为块级元素 display:block;

6.溢出的文字用省略号显示：

    （1）单行文本溢出显示省略号：
        三个条件：

/* 1.先强制一行内显示文本 */
white-space: nowrap;
/* 2.超出的部分隐藏 */
overflow: hidden;
/* 3.文字用省略号替代超出的部分 */
text-overflow: ellipsis;

    （2）多行文本溢出显示省略号：
        有较大兼容性问题，了解即可。适合于webKit内核浏览器或移动端。

/* 1.超出的部分隐藏 */
overflow: hidden;
/* 2.文字用省略号替代超出的部分 */
text-overflow: ellipsis;
/* 3.弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 4.限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 5.设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;

7.常见布局技巧：

    （1）margin负值的应用：
        1.让每个盒子margin往左侧移动-1px正好压住相邻盒子边框。
        2.鼠标经过某个盒子的时候，提高当前盒子从层级即可（没有定位，则加相对定位（保留位置），有定位，则加z-index）。
    （2）文字围绕浮动元素：
        原理：浮动元素不会压住文字的特性。
    （3）CSS三角强化：
        ①直角三角形：

.box1 {
            width: 0;
            height: 0;
            border-color: transparent red transparent transparent;
            border-style: solid;
            border-width: 100px 50px 0 0;
        }

8.CSS初始化：

    CSS初始化是指重设浏览器的样式。
    京东CSS代码初始化：

/* 把我们所有标签的内外边距清零 */
* {
    margin: 0;
    padding: 0
}

/* em 和i斜体的文字不倾斜 */
em,
i {
    font-style: normal
}

/* 去掉li的小圆点 */
li {
    list-style: none
}

img {
    /* border 0照顾低版本浏览器，如果图片外面包含了链接会有边框的问题。 */
    border: 0;
    /* 取消图片底侧有空白缝隙的问题 */
    vertical-align: middle
}

button {
    /* 当我们鼠标经过button按钮，鼠标会变成小手 */
    cursor: pointer
}

a {
    color: #666;
    text-decoration: none
}

a:hover {
    color: #c81623
}

button,
input {
    /* \5B8B\4F53：宋体，Unicode编码，避免浏览器解释CSS代码时出现乱码问题 */
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}

body {
    /* 抗锯齿形，让文字显示的更加清晰 */
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    color: #666
}

.hide,
.none {
    display: none
}


/* 清除浮动 */
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}

.clearfix {
    *zoom: 1
}