CSS之高级技巧

精灵图（sprites）

当网页中的图片过多时，服务器就会频繁地接受和发送请求图片，造成服务器请求压力过大，大大降低页面的加载速度。精灵图把所有的图标都整合在一个图片之中，有效地减少了接受和请求的次数，减轻了服务器的压力，提高的服务器的运行效率。

核心

1. 精灵技术主要时利用背景的定位，把想要的图标定位到某个位置。使用background-position来定义x，y坐标来实现。视频。工具网站
2. 如果自己量，一般都是负的值

字体图标

精灵图比较大，而且放大缩小会失真，而且图标制作完毕后更新非常麻烦。
字体图标完美地解决了上述的问题，本质上字体图标属于字体
讲解视频
使用视频
字体图标常用网站：阿里巴巴矢量图标库
iconmoon字体库
iconmoon使用教程

iconmoon使用：

1. 复制font文件夹到根目录下
2. 打开压缩包中的demo.html，选择对应伪元素的content，修改css

.arrow_icon::after {
    content: '\e91e';
    font-family: 'common';
    margin-left: 6px;
}

3. 在总的css中放入style.css的集体声明

应用原则：

1. 如果遇到一些结构和样式比较简单的小图标，用字体图标
2. 比较复杂的图标，使用精灵图

CSS三角

基础三角

顾名思义，即用css画三角。边框的本质其实是三角形
eg

    <div class="triangle"></div>
    <div class="demo"></div>

.triangle {
    height: 0;
    width: 0;
    border: 30px solid transparent;
    border-top-color: red;
}

.demo {
    height: 0;
    width: 0;
    border-top: 30px solid red;
    border-right: 30px solid blue;
    border-bottom: 30px solid green;
    border-left: 30px solid yellow;
}

效果

三角强化（直角三角形）

思路：把上面的三角边框调大，左边和右边的三角宽度设置为0，上侧的三角改成透明

<div class="triangle"></div>

.triangle {
    height: 0;
    width: 0;
    border-top: 100px solid red;
    border-right: 50px solid yellow;
}

或者：只设置右边框的颜色，其他三个边框设置透明，然后设置上边框为100px，右边框为50px

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

效果

制作一个类似京东的秒杀框

    <div class="box">
        <span class="left">￥1650
            <i></i>
        </span>
        <span class="right">￥5560</span>
    </div>

        .box {
            height: 24px;
            width: 160px;
            margin: 50px auto;
            border: 1px solid red;
            line-height: 24px;
        }

        .left {
            position: relative;
            float: left;
            width: 100px;
            height: 100%;
            margin-right: 8px;
            margin-left: -1px;
            background: red;
            font-weight: 700px;
            color: #fff;
            text-align: center;

        }

        .left i {
            position: absolute;
            top: 0;
            right: 0;
            height: 0;
            width: 0;
            border-color: transparent #fff transparent transparent;
            border-style: solid;
            border-width: 24px 10px 0 0;
        }

        .right {
            float: left;
            font-size: 12px;
            text-decoration: line-through;
            color: gray;
        }

效果

用户界面样式

鼠标样式

通过cursor属性来实现光标的不同形状

轮廓线（outline）

即当光标固定在表单（input）上时，表单周围会有一条选中的线，不美观

//去掉轮廓线
outline:none;

文本域（textarea）

方式textarea自由拖拽改变盒子的大小

resize:none

vertical-align属性及其应用

常用于设置图片或者表单（行内块元素）和文字垂直对齐，即只对行内块元素(inline-block)生效
官方解释：用于设置元素的一个垂直对齐方式，但它只针对行内元素和行内块元素有效

解决图片底部的小空白缝隙问题
原因：图片默认是按照文字的基线来对齐的，解决方法有以下几种

1. 给行内块元素设置vertical-align：middle|top|bottm属性
2. 因为vertical-align只对行内块或行内元素生效，故设置display:block

溢出的文字省略显示

最下面的三行必须要有，只要把盒子的高度设置地比行数低，就可以使用。

常用的布局技巧

1. margin负值的应用，常用于去掉相邻盒子之间的边框。讲解。关于边框掩盖问题：1.若没定位，加定位position：relative，若有定位，添加z-index层级
2. 文字围绕浮动元素环绕（浮动那章讲过）
3. 行内块技巧巧妙运用。只要父亲添加text-align:center，里面的所有行内元素和行内块元素都会水平居中

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" 就是宋体的意思 这样浏览器兼容性比较好 */
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}

body {
    /* CSS3 抗锯齿形 让文字显示的更加清晰 */
    -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
}