由于长期的开发html5移动项目，所以少不了使用一些库，如jquery mobile，zepto等，但是相对于移动设备来说，jquery太庞大了，而且它的意义在于兼容，当一切放在html5的基础上的时候，他就失去了意义。zepto的动画和拖动还是不尽人意，动画缺少控制，而且经常冲突，另外居然有些方法不支持iphone3g，但是公司开发时要求支持的。。。蛋疼是必须的。

也是因为如此，作者就想了，干脆自己封一套算了，以前给自己各种借口逃避，现在终于狠心来下手了。算是为国产开源贡献点小力量。于是sjs出土了。。。

这是一个面向html5的框架，本来可以更精简的，但是为了兼容一些智能手机移动设备（比如iphone3g）做了不少工作，代码比预期的臃肿了。普通的压缩过之后有22k左右，当然可以自己压缩也就10几k。放服务器上再开启gzip的话也就几k而已（屁话，但是大家开发的库都喜欢拿这说事，我也就说了。。），效率大部分比jquery快（同样是废话，都是的html5的原生的选择器，大家都装，我也装）。

项目已经放在了github上：

https://github.com/cczw2010/sjs

里面有详细的api文档，感兴趣的朋友可以看一下。毕竟自己的精力有限，设备有限，bug找的自然有限。欢天喜地的需要大家帮忙找bug。

本文链接

filter:alpha(opacity=70); -moz-opacity:07; -khtml-opacity:0.7; opacity:0.7;

包含块

包含块是用来定位的参照物，建立参照物的规则如下:

1 如果一个元素进行了绝对定位，浏览器窗口本身而它又不在任何一个设定了relative或者fixed或者absolute定位的标签里面，那么这个元素的包含块就是浏览器窗口本身。

2 如果一个元素进行了绝对定位，而它在另一个设定了relative或者fixed或者absolute定位的标签里面，那么这个元素的包含块就是另一个元素边界所围成的区域。

(感觉css权威指南以及网上的一些介绍包含块的规则太复杂，自己测试的时候好像实际情况和他们讲的也不一样)

定位的属性

static(静态定位)：表示元素将遵循正常的从上到下的HTML流，这与你没有设置position属性的效果一样。

relative(相对定位): 表示元素相对于它正常显示的位置(即没有给元素设定position属性时，元素占有的位置)进行定位。相对定位没有脱离正常的文档流，它原来的应该显示的位置不会被其它元素占有。

相对定位前      相对定位后

可以看到元素相对于原来的位置有一定的偏移，并且原来的位置依然存在，并没有被其它元素占有。

absolute(绝对定位): 表示元素将要相对于包含块进行定位，定位后的元素已经脱离了正常的文档流，其它元素会忽略它的存在，因此它原来的位置会被其它元素占去。绝对定位后的元素被当成块级元素对待，而不管它原来是什么类型的元素(不管是块级还是行内元素),并且不会发生边界折叠的问题。

绝对定位前      绝对定位后

绝对定位的元素发生了偏移(包含块为浏览器本身),并且原来的位置被其它元素占有。

fixed(固定定位): 定位方式同absolute一样，只是它的包含块是视区本身，而不是某个元素，即它将被固定于屏幕上的某个位置，而不随网页滚动变化。

设置元素偏移的属性

top left right bottom

px em 百分比

这些属性设置的值得结果使得定位元素相对于包含块的边进行偏移，比如设定top: 10px,那么表示相对于包含块的顶边偏移10px。但要注意，em是相对于字号来计算偏移距离，而百分比是相对于包含块的宽(left, right)或者高(top, bottom)来计算偏移距离。

这几个属性还有一个值auto，它的作用是自动生成定位元素的宽高，可以刚好显示定位元素里面的内容。

这些值可正可负，负值可以使定位元素移到包含块外面。

注意: 在移动的过程中，移动的定位元素包括整个盒模型，即不仅内容移动，边框(border), 补白(padding), 边界(margin)一起移动。

宽高

定位元素的宽高可以通过width和height设置

px em 百分比 auto

其中em是相对于字号来计算值，而百分比是相对于包含块的宽或者高来计算值。auto是缺省时的值。

限制宽高

min-width min-height max-width max-height

px em 百分比

em相对于字号计算，百分比相对于包含块的宽或者高来计算。

本文链接