CSS3的变形

一、inline-block和float的区别

display:inline-block

可以让元素排在一行，并且支持宽度和高度，代码实现起来方便

位置方向不可控制，会解析空格

IE 6、IE 7上不支持

float

可以让元素排在一行并且支持宽度和高度，可以决定排列方向

float 浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式

二、CSS3变形

CSS3变形是一些效果的集合

如平移、旋转、缩放、倾斜效果

每个效果都可以称为变形（transform），它们可以分别操控元素发生平移、旋转、缩放、倾斜等变化

设置变形函数，★ 可以是一个，也可以是多个，中间以空格分开

transform:[transform-function] ;

变形函数

translate()：平移函数，基于X、Y坐标重新定位元素的位置

scale()：缩放函数，可以使任意元素对象尺寸发生变化

rotate()：旋转函数，取值是一个度数值

skew()：倾斜函数，取值是一个度数值

浏览器支持

 属  性  名          IE    Firefox     Chrome    Opera      Safari

2D transform     9+       3.5+         4.0+        10.5+      3.1+

1.2D位移translate

（1） translate(tx,ty);

            tx X轴（横坐标）移动的向量长度

            ty Y轴（横坐标）移动的向量长度

             x轴向右移动200px y轴向下移动80px 

（2）transform: translateY(   px)