1. css样式表模型（cssom的本体）
document.styleSheets
这样可以获取样式表列表
每个样式表都是一堆的css规则（cssRules和rules是一样的）
而每一条rule可能是以下其中一种类型
- CSSStyleRule（最为常见）
- CSSCharsetRule
- CSSImportRule
- CSSMediaRule
- CSSFontFaceRule
- CSSPageRule
- CSSNamespaceRule
- CSSKeyframesRule
- CSSKeyframeRule
- CSSSupportsRule
那CSSStyleRule为例，展开：
最重要的就是cssText、selectorText、style[0]
2.cssom view
CSSOM View 这一部分的 API，可以视为 DOM API 的扩展
窗口部分
有resizeTo、resizeBy、moveTo、moveBy方法，这些方法只能对window.open出来的窗口有作用（示例），而且不适用于移动端浏览器
还规定了window.open的第3个参数：
window.open("about:blank", "_blank" ,"width=100,height=100,left=100,right=100" )
滚动部分
视口
scrollX、scrollY：表示视口 X、Y 方向上的当前滚动距离（修改不会改变实际滚动效果）
scrollTo、scrollBy：使得页面滚动（使用后会影响scrollX、scrollY（前提是它们没有被js修改过））
值得注意的是，如果想监听整个页面的滚动，只能是对document对象来监听：
document.addEventListener("scroll", function(event){
// ...
})
而不能对document.documentElement或者是document.body进行监听，这是无效的
元素
scrollLeft、scrollTop：表示元素 X、Y 方向上的当前滚动距离（和视口的scrollX、scrollY一个意思，但是修改会产生实际滚动效果）
scrollWidth、scrollHeight：表示元素内部的滚动内容的宽度、高度
scroll(x, y)、scrollBy(x, y)：使得元素滚动（和视口的scrollTo、scrollBy一个意思）
scrollIntoView(arg) : 父元素滚动到可以看到当前元素的状态（详情）
布局部分
innerWidth、innerHeight：视口大小
outerWidth、outerHeight：浏览器大小
devicePixelRatio：物理像素和 CSS 像素单位的倍率关系，Retina 屏这个值是 2，后来也出现了一些 3 倍的 Android 屏
screen.width、screen.height：设备屏幕大小
screen.availWidth、screen.availHeight：设备屏幕可以渲染的大小（例如windows桌面最下面有任务栏，所以availHeight=总屏幕高-任务栏高）
screen.colorDepth、screen.pixelDepth：都是固定24，预留给以后标准使用