17 CSS高级技巧

17.1 精灵图

17.1.1 为什么需要精灵图

CSS 精灵技术（也称 CSS Sprites、CSS 雪碧）：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了，该技术有效地减少服务器接收和发送请求的次数，提高页面的加载速度。

17.1.2 精灵图的使用

精灵技术主要针对于背景图片使用，把多个小背景图片整合到一张大图片（sprites/精灵图/雪碧图）中。
主要借助于背景位置来实现—background-position
网页中的坐标： x轴右边走是正值， y轴下边走是正值（一般情况下都是往上往左移动，所以数值是负值。）

案例

王者荣耀精灵图。

详见：示例

案例

案例：拼出自己“pink”四个字母。

详见：示例

17.1.3 二倍精灵图的做法

在移动端时，会使用到二倍精灵图。

先把精灵图等比例缩小一倍
再测量坐标
在background-size也要缩小为原来宽度的一半。高度不写或者写auto。

17.2 CSS三角

一张图，你就知道 CSS 三角是怎么来的了, 做法如下：

图3.1: CSS三角

<style>
    .box1 {
        width: 0;
        height: 0;
        border-top: 10px solid pink;
        border-right: 10px solid red;
        border-bottom: 10px solid blue;
        border-left: 10px solid green;
    }

    .box2 {
        width: 0;
        height: 0;
        border: 50px solid transparent;
        border-top-color: pink;
        margin: 100px auto;
    }
</style>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

上述图片详见：

详见：示例

案例

盒子右上角有个小三角。

详见：示例

17.3 CSS用户界面样式

所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。

更改用户的鼠标样式
表单轮廓
防止表单域拖拽

17.3.1 鼠标样式 cursor

语法

css选择器 {
  cursor: pointer;
}

cursor属性值

表2.1: 鼠标样式
属性值	描述
default	白色箭头
pointer	小手
move	移动
text	文本
not-allowed	禁止

案例

我是默认的小白鼠标样式
我是鼠标小手样式
我是鼠标移动样式
我是鼠标文本样式
我是鼠标禁止样式

17.3.2 表单轮廓线 outline

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

input {outline: none; }

详见：示例

17.3.3 文本域防止拖拽 resize

文本域右下角应该不可以拖拽，所以需要设置防拖拽。

textarea{ resize: none;}

详见：示例

17.4 vertical-align 属性

17.4.1 图片、表单和文字对齐

CSS 的 vertical-align 属性使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐，该属性只针对于行内元素或者行内块元素有效。

vertical-align : baseline | top | middle | bottom

表17.1: vertical-align属性
属性值	描述
baseline	默认。元素放置在父元素的基线上
top	把元素的顶端与行中最高元素的顶端对产
middle	把此元素放置在父元素的中部
bottom	把元素的顶端与行中最低的元素的顶端对齐

图17.1: 文字的垂直高度

图片、表单都属于行内块元素，默认的 vertical-align 是基线对齐。

图17.2: 图片和文字默认垂直对齐

此时可以给图片、表单这些行内块元素的** vertical-align 属性设置为 middle** 就可以让文字和图片垂直居中对齐了。

详见：示例

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

图片在父盒子中时，图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。

主要解决方法有两种：

给图片添加 vertical-align:middle | top| bottom 等。（提倡使用的）
把图片转换为块级元素 display: block; 因为只有行内或行内块元素才有vertical-align属性。

详见：示例

17.5 溢出的文字省略号显示

17.5.1 单行文本溢出显示省略号

语法

选择器 {
    /* 1. 超出的文字不换行 */
    white-space: nowrap;   /* wrap是换行的意思 */
    /* 2. 溢出的部分隐藏 */
    overflow: hidden;
    /* 3. 溢出的部分用省略号表示 */
    text-overflow: ellipsis;
}

详见：示例

17.5.2 多行文本溢出显示省略号

多行文本溢出显示省略号，可能存在兼容性问题，适合于webKit浏览器或移动端（移动端大部分是webkit内核）

语法

选择器 {
    overflow: hidden;
    text-overflow: ellipsis;
    /* 弹性伸缩盒子模型显示 */
    display: -webkit-box;
    /* 限制在一个块元素显示的文本的行数 */
    -webkit-line-clamp: 2;
    /* 设置或检索伸缩盒对象的子元素的排列方式 */
    -webkit-box-orient: vertical;
}

详见：示例

17.6 常见布局技巧

margin负值的运用
文字围绕浮动元素
行内块的巧妙运用
CSS三角强化

17.6.1 margin负值运用

让每个盒子margin 往左侧移动 -1px 正好压住相邻盒子边框
鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有有定位，则加相对定位（保留位置），如果有定位，则加z-index）

详见：示例：盒子无相对定位

详见：示例：盒子有相对定位

17.6.2 文字围绕浮动元素

图8.1: 文字围绕浮动元素效果

详见：示例：文字围绕浮动元素

17.6.3 行内块巧妙运用

页码在页面中间显示:

把这些链接盒子转换为行内块，之后给父级指定 text-align:center; 父盒子会水平居中
行内块元素添加 text-align:center; 行内块元素会水平会居中
行内块元素间有缝隙，

图17.3: 行内块元素制作翻页

详见：示例：文字围绕浮动元素

17.6.4 三角加强

语法

<style>
.box1 {
    width: 0;
    height: 0;
    border-color: transparent red transparent transparent;
    border-style: solid;
    border-width: 100px 50px 0 0;
}
</style>
  
<body>
    <div class="box1"></div>
</body>

练习：

效果图如下：

图4.1: 直角三角形

详见：示例

17.7 CSS初始化

不同浏览器对有些标签的默认值是不同的（如margin padding等），为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS 初始化

详见：示例

Unicode编码字体：

把中文字体的名称用相应的Unicode编码来代替，这样就可以有效的避免浏览器解释CSS代码时候出现乱码的问题。

比如：黑体 \9ED1\4F53 宋体 \5B8B\4F53 微软雅黑 \5FAE\8F6F\96C5\9ED1