王国任的博客

当我们使用边框的时候，如果盒子相邻在一起，就会造成边框重叠加粗的问题，原本的1px的边框，重叠就会变成2px，造成加粗的效果。 边框重叠实例 下面是多个盒子边框重叠的实例。 可以看到右边框与左边框重叠，下边框与上边框重叠，造成加粗。 margin负值实例代码 <style> div { width: 200px; height: 300px; border: 1px solid #ccc; } </style> &lt

我们知道，网页中的每一张图片，都是一个请求，这些请求会占据一定的服务器带宽，当这些请求很多的时候，就会造成服务器带宽被占满，或者图片显示很慢，用户体验极差。 这时候就需要精灵图(sprite)来解决了，精灵图就是将网页中所有用到的背景图片以及图标浓缩到一张图上，这就显著的减少了图片和图标的请求，只请求一次就可以用所有背景图标。 典型例子 相信大家都会玩王者荣耀，王者荣耀的官网就使用了精灵图，通过审查元素可以查找到这张精灵图。 上面的精灵图中包含了用到的所有图标和按钮背景图片。 使用方法 使用精灵图必须熟练