定位和浮动的对比

一、为什么需要定位？

1、某个元素能自由的在一个盒子内移动位置，并且压住其他盒子。

2、滚动窗口时，盒子是固定屏幕某个位置的。

二、为什么需要浮动？

浮动可以让多个块级盒子一行没有缝隙的排列，常用于横向排列的盒子。

三、定位与浮动的区别

1、行内元素添加绝对（position：absolute）或者固定定位（position：fixed），可以直接设置高度和宽度。

2、块级元素添加绝对（position：absolute）或者固定定位（position：fixed），如果不给高度或者宽度，默认大小是内容的大小。

3、脱标的盒子不触发外边距塌陷。

4、浮动元素只会压住它下面标准流的盒子，但不会压住下面的标准流盒子里面的文字、图片；绝对定位（固定定位）会完全压住盒子。（因为浮动最初发明是为了做文字环绕效果）。

四、为什么需要精灵图

为了有效减少服务器接收和发送的次数，提高页面加载的速度。

五、为什么需要字体图标

1、因为精灵图图片文件比较大

2、图片本身放大和缩小会使图片失真

3、一旦图片制作完毕想要更换非常复杂

字体图标展示的是图标，本质是字体。

1、轻量级:一个图标字体要比一系列的图像要小。一旦字体加载了,图标就会马上渲染出来，减少了服务器请求

2、灵活性:本质其实是文字，可以很随意的改变颜色产生阴影、透明效果、旋转等

3、兼容性: 几乎支持所有的浏览器,请放心使用