CSS雪碧图，即CSS Sprite，也有人叫它CSS精灵图，是一种图像拼合技术。该方法是将多个小图标和背景图像合并到一张图片上，然后利用CSS的背景定位来显示需要显示的图片部分
减少Http请求数量，加速内容显示。因为每请求一次，就会和服务器建立一次链接，而建立链接是需要额外的时间的。
加快网页加载速度网页上面每一张图片，都要向浏览器请求下载图片，而浏览器接受的同时请求数是10个，一次能处理的请求数目是两个。
后期维护简单
该工具可以直接通过选择图片进行图片的拼接，当然你也可以自己挪动里面的图片，自己去布局你的雪碧图，更换图片的时候也只要更改一下图片的位置就可以了。直接生成代码，简单易用。
CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。
CSS Sprites一般只能使用到固定大小的盒子（box）里，这样才能够遮挡住不应该看到的部分。这就是说，在一些需要非单向的平铺背景和需要网页缩放的情况下，CSS Sprites并不合适。
“Bootstrap是一组用于网站和网络应用程序开发的开源前端框架，包括HTML、CSS及JavaScript的框架，提供字体排印、窗体、按钮、导航及其他各种组件及Javascript扩展，旨在使动态网页和Web应用的开发更加容易。
固定布局根据浏览器不同分辨率，固定尺寸不同，不同阈值对应的宽度如下：
>=1200 width为1170px 列的class是： col-lg-*
>=992 width为970px 列的class是： col-md-*
>=768 width为750px 列的class是： col-sm-*
<768 为自适应宽度auto 列的class是： col-xs-*此外列偏移col-[*]-offset-*
含义：表示在对应的屏幕分辨率下偏移多少个栅格
清除浮动在需要清除浮动的元素前面添加一个空的div，给div添加类名clearfix
使用字体图片的优点：①减少网页请求②样式容易控制，可以通过css直接设置样式
用法：
创建一个空标签，给该空标签添加一个基类和对应图标的类
真正意义上的inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距
方法一:改变书写方式来移除空格
元素间留白间距出现的原因就是标签段之间的空格，因此，去掉HTML中的空格，自然间距就消失了。
<div class="space">
<a href="##">
惆怅</a><a href="##">
淡定</a><a href="##">
热血</a>
</div>或者是：
<div class="space">
<a href="##">惆怅</a
><a href="##">淡定</a
><a href="##">热血</a>
</div>或者是借助HTML注释：
<div class="space">
<a href="##">惆怅</a><!--
--><a href="##">淡定</a><!--
--><a href="##">热血</a>
</div>方法二 使用margin负值
margin负值的大小与上下文的字体和文字大小相关吗，由于外部环境的不确定性，以及最后一个元素多出的父margin值等问题，这个方法不适合大规模使用。
方法三 去掉闭合标签
<div class="space">
<a href="##">惆怅
<a href="##">淡定
<a href="##">热血
</div>
如果需要考虑兼容IE6/IE7则把最后一个标签的闭合标签</a>加上方法四 使用font-size:0
.space {
font-size: 0;
}
.space a {
font-size: 12px;
}这个方法，基本上可以解决大部分浏览器下inline-block元素之间的间距(IE7等浏览器有时候会有1像素的间距)。
方法五 使用word-spacing或letter-spacing
一个是字符间距(letter-spacing)一个是单词间距(word-spacing)，大同小异。 父元素letter-spacing负值只要大到一定程度，其兼容性上的差异就可以被忽略。因为，即使父元素letter-spacing负值很大，也不会发生重叠。但是子元素要设置letter-spacing为0，不然会继承父元素的值；使用word-spacing时，只需设置父元素word-spacing为合适值即可。
对于一些可以继承的属性，可以只设置上级的CSS样式表树形，子级（下级）不用设置，会自动继承此CSS属性，可以减少CSS代码，便于维护。
当opacity作用于某个元素时，是把这个元素（包括它的内容）作为一个整体看待，即使这个值没有被子元素继承。因此 ，这个元素和它的所有子元素都会具有和元素背景相同的透明度，哪怕这个元素和它的子元素拥有不同的opacity属性值。
原文：https://www.cnblogs.com/housheng/p/11953794.html