HTML基础(2)～图片精灵，盒模型，浮动布局，弹性布局，css动画，变形

1，图片精灵（雪碧图）

图片精灵：将很多张小图整合成一张大图片，然后通过css样式在页面中显示出来某个小图片。
图片精灵的好处：1.减少页面的请求次数，2.提高页面的加载速度。
link标签：引入外部文件

	<link rel="stylesheet" href="sprite.css">

用到图片精灵的时候如何设置背景大图的尺寸？
不用看大图的原有尺寸，先看纵向和横向有多少小图，然后分别用个数*元素对应轴的尺寸。

2，元素盒模型

一个html元素，从里到外分为4个部分，内容盒(content)，内间距(padding)，边框(border)，外间距(margin)。
默认情况下，给元素设置的宽高，是内容盒的宽高，不包含边框与内间距。
设置盒模型，默认是内容盒content-box。

	box-sizing: content-box；

Border-box是边框盒。

	box-sizing: border-box;

计算宽高时：
按照内容去结算的是内容盒；
内容+内边距+边框=是边框盒。

3，外边距重叠的条件

必须是块元素，
必须是向下的外边距，
没有边框

4，float(浮动布局)

float：设置元素使用浮动布局，浮动有左浮动和右浮动。元素在使用浮动后，会脱离原有的文档流，在浮动文档流中，块元素是横向排列。
注 意 ： 在 最 后 一 个 浮