码迷,mamicode.com
首页 > Web开发 > 详细

关于常用却忘记的css,jQuery

时间:2015-08-26 19:57:30      阅读:141      评论:0      收藏:0      [点我收藏+]

标签:

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

 

水平居中设置:

行内元素: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://表示渐进效果 跟四个属性

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

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

 

transition就是在触发某个动作后,属性值发生缓慢的改变 属性如上所述有四个

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;/*定义动画方式*/

关于常用却忘记的css,jQuery

标签:

原文地址:http://www.cnblogs.com/openflyme/p/4719257.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!