这里是修真院前端小课堂，每篇分享文从
【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】
八个方面深度解析前端知识/技能，本篇分享的是：
【什么是CSS sprites？margin负值在页面布局中有哪些应用？ 】
大家好，我是IT修真院北京分院第23期的学员杨梦桐，一枚正直纯洁善良的Web程序员。
今天给大家分享一下，修真院官网CSS任务7的知识点——如何制作CSS Sprite和任务8中的知识点——margin负值的应用。
1. 背景介绍
在页面布局中，有很多的可以应用在页面布局中的小技巧，这篇文章主要是关于CSS雪碧图和margin负值的应用。
首先总结一下雪碧图。
CSS Sprite（雪碧图）其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”、“background-position”的组合进行背景定位，用数字精确地定位出背景图片的位置。
这样一来，当访问该页面时，客户端只需要向服务器请求少量的图片，图片越多请求次数越少，造成延迟的可能性也就越小，能有效减轻服务器的压力，这是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因。
目前很多的大型网站如淘宝等，为了保证自己的网页加载速度，所以要在小图标的地方应用雪碧图。
首先，将需要拼接成雪碧图的小图标从Ps中导出来，然后使用软件拼接成雪碧图。
2. 解决方案
这里推荐一个制作CSS Sprite的软件：CSS gaga。
点击图片合成，把所有小图标全选中，拖入窗口，就可以合成雪碧图，并返回一个坐标的.txt文件。
实际在使用雪碧图的时候，由于div内显示的是原点（0,0）位置的图，其他图片要移到原点才能显示，所以要向坐标轴负轴方向移动，x，y位置都是负的。
接下来是关于margin负值的应用。
1.背景介绍
我们在CSS中都会使用margin，但将margin设置成负数，那可能就不大好处理了。但是在实际的编程布局中，负margin可以在简化代码的同时达成理想的CSS布局效果。
2.知识剖析
以下几点是需要知道的。
1. 负margin是绝对标准的CSS
2. 不脱离文档流，不使用float的话，负margin元素是不会破坏页面的文档流。所以如果你使用负margin上移一个元素，所有跟随的元素都会被上移。
3. 完全兼容:所有现代浏览器都完全支持负margin（IE6在大多数情况下也支持）。
4. 浮动会影响负margin的使用，负margin不是你每天都用的CSS属性，应用时应小心谨慎。
3. 编程实战
如图，就是设置负margin的效果。
子元素css代码如下
如果是设置了负的margin-bottom，就会出现如下的效果，下面的元素会覆盖上面的元素。
根据这些效果，参考https://www.w3cplus.com/css/the-definitive-guide-to-using-negative-margins.html，设置一个负二倍行高的margin-top，就可以产生如下的分三列效果。
除此之外，还有其他的应用，比如文字3D效果。
设置两个宽高相等的div包含相同的内容，然后给第一个div设置一个比高小1到2个px的负margin-bottom，就可以达成这个效果。
html代码
css代码
还可以使用负margin改变子元素的居中
用蓝色div包裹粉色div，蓝色div绝对定位，top和left为50%，粉色div上方右方为负50%的margin，即在父元素中居中。
像这样的三行布局也可以通过负margin实现，为其设置等高的padding-bottom和margin-bottom，父div设置overflow：hidden；即可。
参考文献
参考二：负margin用法权威指南
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
我们下周再见！
------------------------------------------------------------------------------------------------------------------------
技能树.IT修真院
“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。
这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧~
我的邀请链接：jnshu.com/login/1/69475143
作者：AmaYang
链接：https://www.jianshu.com/p/09f380b623e9
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
更多内容，可以加入IT交流群565734203与大家一起讨论交流
这里是技能树·IT修真院：https://www.jnshu.com，初学者转行到互联网的聚集地