关于常用却忘记的css，jQuery

text-indent:35px;//首行缩进

line-height:12px;//行高,高度和外层高度一样就会居中

box-shadow:inset 0px 0px 2px #ccc;

contenteditable="true"//使得div变为可编辑

Math.min.apply(null,array);//可对数组求最小值

var index=$.inArray(value,array);//在数组array中找到值为value的索引

要想使用height:100%  需要加position:absolute

透明背景：background:transparent;

box-sizing:border-box;

背景图固定：background-attachment:fixed;

背景图伸展开:background-size:cover;

水平居中设置：

行内元素：text-align:center;适用于img

而对于定宽块状元素，用margin

不定宽度的块状元素有三种方法居中（这三种方法目前使用的都比多）：

1. 加入 table 标签
2. 设置 display;inline 方法
3. 设置 position:relative 和 left:50%;

float样式和absolute可以将行内元素变为display:inline-block//inline-block即可以和其他元素都在一行上且可以设置高度宽度

css3,关于获取第n个子元素：$("#inventory").find('td:nth-child(n)')//表示获取div的第三个td子元素

jQuery中的map遍历方法：具体还需实践

letter-spacing:2px;//表示字母直接的间隔，不针对中文

-webkit-transition://表示渐进效果 跟四个属性，当时chrome浏览器时，加上-webkit-，当时Opera时，加上-o-，当是火狐浏览器时，用-moz-。

有一个记忆的方法很有效，记住，transition用于过渡

• transition-property
• transition-duration
• transition-timing-function
• transition-delay

此处就不得不说一下transform，transition，animation的区别了，简而言之 ，tansform就是变形，类似扭曲skew,旋转rotate，缩放scale，移动translate，矩阵变形matrix，调用采用transform:rotate(30deg)的形式

若需要制作一个3d效果的动画，则基本配置如下：

<style>

#main

{

-webkit-perspective:800;//表示从浏览器看到的那个物体距离有800px远

-webkit-perspective-origin:50% 50%;//表示从浏览器正中来观察

-webkit-transform-style:preserve-3d;

}

.block

{

width:200px;;

height:200px;

background:red;

-webkit-transform:rotate(45deg);

}

</style>

<div id="main">

　　<div class="block">

　　</div>

</div>

transform还有一个属性，是transform-origin，是旋转中心，X可以用left，center，right，Y轴可以用top，center，bottom，Z轴可以用length px

transition就是在触发某个动作后，属性值发生缓慢的改变 属性如上所述有四个，此处注意，是属性，具体看下面这个小例子：

<div class="block"></div>

<style>

.block{

width:200px;

-webkit-transition:width linear 2s;

}

.block:hover

{

width:500px;

}

</style>

这样，当鼠标移上去后，在2s时间内，width改变，注意，transition-timing-function有种：ease（缓慢进入，缓慢出），linear（匀速），ease-in(缓慢进入)，ease-out(缓慢出去)，ease-in-out(缓慢进入，缓慢出去)

还可以使用一种较方便的方式，直接在.block样式中写transition:all 0.35s linear;//表示对block上的所有元素应用动画，这种写法结合transform:rotate(),transform:skew()等都可以产生不错的动画效果

animation即是动画，和transition差不多，有一个不同点就是可以不触发行为的情况下产生动画的效果

这就需要关键帧： keyframes

例如：

@-webkit-keyframes 'rot'

{

10%{left:20px}

40%{left:40px;}

60%{left:10px;}

80%{left:0px;}

}

也可用from to

from {
left: 100px;
}
to {
left: 70px;
}

调用时调用这个'rot'动画名即可：

.item

{left:20px;

animation:'rot' 20s;

}

参数有很多：

 -webkit-animation-name:'wobble';/*动画属性名，也就是我们前面keyframes定义的动画名*/
     -webkit-animation-duration: 10s;/*动画持续时间*/
     -webkit-animation-timing-function: ease-in-out; /*动画频率，和transition-timing-function是一样的*/
     -webkit-animation-delay: 2s;/*动画延迟时间*/
     -webkit-animation-iteration-count: 10;/*定义循环资料，infinite为无限次*/
     -webkit-animation-direction: alternate;/*定义动画方式*/