自学小笔记(2017-4-16,HTML)

1.background-size的几个属性值：contain  图片长宽会等比缩放到能够完全被容器容纳；

                                                          cover      图片长宽会等比缩放到完全覆盖容器，所以图片可能会有超出部分；

                                                          宽度值  高度值    可以指定具体数值如100px  100px 或者使用百分比 80% 100%

2.图片的旋转：transform-origin : feft top   (以左上角为旋转中心，默认旋转中心为图片中心)

                           transfrom : rotate(30deg)  (旋转30度，默认顺时针旋转)

                           注意：如果浏览器没有支持标准的transform-origin属性，需要在属性前面加各浏览器厂商的前缀，例如：-moz- , -webkit- , -o-.

                          4种基本变形函数有translate()位移 ，scale()缩放 ，rotate()旋转，skew()倾斜。

3.关于定位的几个值：默认值：static  表示没有定位，元素出现在正常的流中，会忽略 top, bottom, left, right 或者 z-index 声明；

                                                       relative 元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

                                                      absolute 元素框从文档流完全删除，并相对于其包含块定位。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。

                                                     使用定位后，可以定义一个z-index样式属性，表明层叠的先后关系，默认值为0，可以设置负数，数字越大优先级越高，元素越置于上层

4.试了一下午，原来jquery中的animate()方法并不能操作transform来动态旋转图片。

                           自己尝试了一下其他方法，有两种方式能达到想要的动态旋转目的：1，设置一个定时器interval()，让transform的rotate(1deg)属性值定时变换

                                                                                                                                                   2，设置transition样式属性，分别设定3个值，属性、时间、快慢方式