精灵图、圆角边框以及vertical-align 属性整合的应用案例

---

前言

大家在逛淘宝京东等网站的时候，一定见到过下面这个图片吧，虽然看起来不是很复杂，但涉及的都是重要的知识点，下面我们通过这个案例来讲解所用到的CSS属性以及核心代码。

---

一、精灵图

1.什么是精灵图？

css精灵图即CSS Sprites，是一种网页图片应用处理方式。主要是指将网页中需要的零星的小图片集成到一个大的图片中。css精灵图有减少图片的字节、减少网页的http请求，提高页面的性能、减少命名难问题等优点。

（示例）：

2.使用核心

1. 主要针对背景图片使用.
2. 移动背景图片位置，此时可以使用 background-position
3. 移动的距离就是这个目标图片的 x 和 y坐标。注意网页中的坐标有所不同，x轴往右为正值，y轴往下为正值
4. 因为一般情况下都是往上往左移动，所以数值是负值
5. 使用精灵图的时候需要精确测量，每个小背景图片的大小和位置.
   代码如下（示例）：

background: url(icons.png) -416px -90px;
/*调用精灵图，416px和90px为购物车图标在精灵图中x轴和y轴的位置，以图片左上角为起点，要往左上移动，所以为负值*/

二、圆角边框

1.属性及用法

border-radius 属性用于设置元素的外边框圆角.

border-radius: length(数值);

2.常用写法：

1.参数值可以为 数值 或 百分比的形式
2.如果是正方形， 想要设置为一个圆，把参数值改为高度或者宽度的一半即可，或 50%
3.如果是个矩形，设置为高度的一半就可以做 一个圆矩形.
4.该属性是一个 简写属性， 可以跟四个值，分别代表 左上角、右上角、右下角、左下角（
若跟一个值，则四个角都一样
若跟两个值，则对角线为一组.
）
5.分开写： border-top-left-radius 为左上角，其余同理

---

三、vertical-align属性

1.使用场景

经常用于设置图片或者表单（行内块元素）和文字垂直对齐.

2.语法及属性值

vertical-align : baseline | top | middle | bottom

• baseline : 默认。元素放置在父元素的基线上
• top : 把元素的顶端与行中最高元素的顶端对齐
• middle ：把此元素放置在父元素的中部
• bottom : 把元素的顶端与行中最低的元素的顶端对齐

总结

结合以上三个知识点，核心代码如下：

获取购物车图标：

background: url(icons.png) -416px -90px;

图标与文字中间对齐：

 vertical-align: middle;

小气泡图标：

.icon {
    position: absolute;/*因为该图标需要自由的移动所以要用定位*/
    width: 15px;
    height: 15px;
    font-size: 10px;
    color: white;
    background-color: #e60012;
    line-height: 15px;/*为了让图标里面的内容垂直居中*/
    border-radius: 7px 7px 7px 0;
}

以上就是实现该案例的主要知识点内容，但要完整的把图片中的内容做出来，还需要将文字，父盒子补充上，再通过对图标进行位置的调节就可以实现啦~有兴趣的同学可以自己操作一下哟 ❤