1 选择器
div p div下所有p元素，可能多个层级
div>p div下的子元素p，只能是一级
div+p div兄弟节点的第一个p
div~p div兄弟节点所有p元素
class^=是什么意思啊
这是css属性选择器的一种：[attribute^=value] ，用来匹配属性值以指定值开头的每个元素。例如：
[class^=”test”] { background:#ffff00; }
表示设置 class 属性值以 “test” 开头的所有元素的背景色，也就是说对class=”test”, class=”test1” class=”test-001”的元素都是有效的。
除此之外，还有一些常用的css属性选择器如下：
- [attribute~=value] 选取属性值中包含指定词汇的元素
- [attribute|=value] 选取带有以指定值开头的属性值的元素，该值必须是整个单词。
- [attribute$=value] 匹配属性值以指定值结尾的每个元素
- [attribute*=value] 匹配属性值中包含指定值的每个元素
2 classList
document.classList 属性返回元素的类名，作为DOMTokenList对象，改属性用于在元素中添加，移除及切换CSS类，它是只读的，但你可以使用remove，add修改它
3 判断是否是移动设备
var IS_TOUCH_DEVICE = !!( 'ontouchstart' in window );
这就是来判断 ontouchstart是不是window下的一个属性，如果是就返回真，如果不是就返回假
ontouchstart事件只是在移动端使用的事件，要是判断用户是PC还是移动端的话，你就直接判断用户的系统是否为苹果或者安卓，WP这些就能知道是移动端的了
4 . 和 # 的区别
id：用来定义页面中大的样式，如栏目划分，顶部，正文，底部等；用#top的形式来定义；
class：用来定义一些比较细节的样式，如具体的一个菜单，一行文字等，用.text的形式来定义。
定义HTML中的标签，如ul,img,p等时，直接写：img{}
class是样式组，用.style定义，class=”style”：
.style定义样式组，可以被反复调用，就是说你一个页面里，可以有多个元素用同一个style；
ID是固定标签，用#style1定义，ID=”style1”
#main和.main有什么区别:
#main 定义的是ID为”main”这个元素的样式
.main 的意思是新建一个名为”main”的样式
#main 只能定义ID为”main”这个元素的样式
.main 一但定义以后,可以让其他的元素来调用,方法为class=”main”
5 正则/^(ul|ol)$/i
- i 忽略大小写
/^(ul|ol)$/i.test(element.nodeName) 判断element.nodeName是否符合正则表达式，test函数就是判断是否符合。
6 meta
<meta name="apple-mobile-web-app-capable" content="yes" />
网站开启对web app程序的支持
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
说明：
- 在web app应用下状态条（屏幕顶部条）的颜色；
- 默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。
http://www.cnblogs.com/yuzhongwusan/archive/2011/11/29/2267568.html
7 重定向
<!-- Redirect to the mobile index page if we're on a touch device -->
<script>if( 'ontouchstart' in window ) window.location = 'mobile.html';</script>
这句话就是判断，如果当前设备是移动设备，就将当前页面的url重定向为mobile.html，学习stroll.js代码时看到的。
如果将这个放在head中，那么就会在加载页面的时候，实现自动控制。
8 布局
padding的顺序： 上 右 下 左
margin:25px 50px 75px 100px;上右下左
margin:25px 50px 75px;上左下
margin:25px;
margin: 0 auto 如果后面跟两个参数，第一个表示 top bottom 第二个表示 left right。
因为0 auto，表示上下边界为0，左右则根据宽度自适应相同值（即居中）
9 position
通常使用position用于层的绝对定位
- static：无特殊定位，默认，遵循html的定位规则，采用常规流向
- absolute: 将对象从文档常规流向中拖出，使用left，right，top，bottom等属性进行绝对定位
- relative: 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置
position:absolute；position:relative绝对定位使用通常是父级定义position:relative定位，子级定义position:absolute绝对定位属性，并且子级使用left或right和top或bottom进行绝对定位
10 before,after
全部都是用before，after，hover等构成的动画，自己还没有看懂，需要慢慢消化 http://zaole.net/
在学习btn-8的时候，对atuo的理解：
|
|
上面的代码会显示一个上下高度为20的after何before，这里因为他们是z-index=-1，所以不会遮挡content，但是如果没有对.btn-8:after {
top: auto;
bottom: 0px;
}
单独配置，就会出现，两个互相重叠的效果，这也很好理解，他们的属性完全一样.btn-8:before, .btn-8:after ，添加了.btn-8:after之后，after就出现在了下面，这个是为什么呢，先看下auto的定义：
对于 static 元素，为 auto；对于长度值，则为相应的绝对长度；对于百分比数值，为指定值；否则为 auto。
对于相对定义元素，如果 top 和 bottom 都是 auto，其计算值则都是 0；如果其中之一为 auto，则取另一个值的相反数；如果二者都不是 auto，bottom 将取 top 值的相反数。
所以上面的css动画中，显示如下
absolute，top：auto，bottom：0说明是从底部开始的。