浮动特性应用实例

应用实例—图文绕排

• 总结：浮动脱离文档流不脱离文本流

• 最初只用于在成块的文本内浮动图像为图片和文字之间的对齐方式是基线对齐 要想图文环绕 需要给图片设置浮动

应用实例—两列自适应

• 实现要点：单列定宽，单列自适应

• 浮动实现

  • 左边的盒子固定宽度，添加float:left

  • 右边盒子宽度自适应, 添加margin-left:左盒子宽度。

二、CSS 精灵（雪碧图、精灵图）

学习目标

• 能够说出什么是CSS精灵

• 掌握CSS精灵在实际示案例中的应用

概述

css精灵英文叫法 css sprites，通常被解释为“CSS 图像拼合”或“CSS 贴图定位”；其实就 是把网页中一些背景图片整合到一张图片文件中，再利用 CSS “background-image”， “background- repeat”，“background-position”的组合进行背景定位，background-position 精确的定位出背景图片的位置

精灵图的原理

• 将页面中的背景图合并成一张图片

• 利用背景属性，使不同元素显示图片的不同部分

实现步骤：

1.测量图片大小

2.通过引入背景图片，用背景定位实现

2、css sprites的优缺点

• 优点：