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
不定宽度的块状元素有三种方法居中(这三种方法目前使用的都比多):
- 加入 table 标签
- 设置 display;inline 方法
- 设置 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;/*定义动画方式*/