2.减少图片命名混乱
3.方便改变网页风格
1、需要限制容器的尺寸
3、适用场景
适合小图片（如小图标、小背景），不适合大背景和大布局背景。
三、推拉门概述：
css精灵图可以实现特殊形状背景的自由拉伸和滑动，并且可以适应不同字数的内容
示例预览
沫沫是一种生命形式
实施要点
滑动门的核心技术是利用背景属性（主要是背景位置）和包填充的长度，方便导航栏适应不同字数。
滑动门实现： a span a用来撑开左边的小括号 span用来撑开右边的小括号 给a设置padding-left: 让文字距离左边有点距离，美观 给span设置padding-right 让文字距离右边有点距离，美观 实际文字写在span里面，span的宽度由文字和内边距撑开 a的宽度是由span撑开了
Document * { margin: 0; padding: 0; list-style: none; } a { text-decoration: none; color: #fff; } .wrap { height: 74px; background: url(../img/css滑动.jpg) repeat-x; } .wrap ul { height: 74px; line-height: 74px; padding-left: 200px; box-sizing: border-box; } .wrap ul li { float: left; margin-right: 20px; } /* a用来撑开左边的小括号 */ .wrap ul li a { height: 33px; line-height: 33px; display: inline-block; background: url(../img/hua.png) no-repeat 0% 0%; padding-left: 15px; } /* span用来撑开右边的小括号 */ .wrap ul li span { height: 33px; line-height: 33px; display: inline-block; background: url(../img/hua.png) no-repeat 100% 100%; padding-right: 15px; } .wrap ul li:hover a { /* background: url(../img/hua.png) no-repeat 0% 0%; */ } .wrap ul li:hover span { /* background: url(../img/hua.png) no-repeat 100% 100%; */ }
四、CSS定位的作用
在正常的文档流中，块元素垂直排列，行内元素水平排列。 定位允许我们将一个元素从其在正常布局流程中的原始位置连接到另一个位置（在某个包中自由通信或将其固定在屏幕上的某个位置）
定位的实现
使用定位需要指定文档中元素的定位模式css 滑动门，配合设置【边缘偏转量】来决定元素最终的显示和位置
定位模式通过position属性设置。 以下是四种常用的定位方式：静态定位、相对定位、绝对定位、固定定位
边缘偏移定位元素的位置，用“top”、“right”、“bottom”、“left”来描述。一般水平位置用left或right控制css 滑动门，垂直位置用ttop或bottom控制
定位模式解读1、position：relative相对定位
相对定位相对于元素本身的位置进行了位置调整，占用仍然在原来的位置，也就是说元素设置了相对定位后，它原来的位置仍然占用占用
特征
特性： 1.不影响元素本身的特性 2.不会使元素脱离正常文档流，也就是还占位 3.如果没有定位偏移属性，对元素本身没有任何影响；如果有定位偏移属性，则相对于元素原来的位置发生偏移 4.提高层级 应用场景 ： 1.微调自己的位置 2. 作为绝对定位的参照物
2、位置：absolute绝对定位
当没有定位父级时相对于html的位置，当有定位父级时相对于最近的定位父级的位置
特征
特性： 1.元素脱离正常文档流，不占位(也脱离文本流，全脱) 2.有定位父级相对于定位父级发生定位偏移 3.如果没有定位父级相对于浏览器窗口发生定位偏移（如果其父亲没有相对定位，会一直往上找，直到相对于html） 4.能使不能设置宽高的行级元素设置宽高 5.提升层级 6.如果没有定位偏移属性，对元素本身有影响；如果有定位偏移属性，则相对于父元素发生偏移
应用场景：
一般与绝对定位（孩子和父亲）结合实际案例配合使用，例如焦点图中的分页、翻页、视频网站中的vip标签等。
