一、 window 與document 的區別

1、window 物件表示瀏覽器中開啟的視窗
2、window 物件可以省略

1、document物件是window的一部分
2、瀏覽器中HTML文件成為document物件

二、window.location 和document.location作用是一樣的，表示該視窗中顯示當前的URL

三、與window相關的寬高

1、window.innerWidth ,內部寬度
2、window.innerHeigth ,內部高度
3、window.outerWidth,外部寬度
4、window.outerHeigth,外部高度

四、window.screen 物件包含有關使用者螢幕資訊

1、window.screen.heigth
2、window.screen.width
3、window.screen.availHeigth ,可利用高度
4、window.screen.availWidth,可利用寬度
5、window.screenTop
6、window.screenLeft

五、與client相關的高度
1、document.body.clientWidth;
2、document.body.clientHeigth;
3、document.body.clientTop;
4、document.body.clientLeft;

（1）clientWidth與clientHeigth
該屬性指的是元素的可視部分的寬度和高度，即padding+content.
如果沒有滾滾動條，即為元素設定的寬度和高度。如果出現滾動條，滾動條會遮蓋元素的寬度，那麼該屬性就是本來寬度減去滾動條的寬度

（2）clientLeft和clientTop這一對屬性是用來讀取元素的border的寬度和高度

clientLeft=border-left的border-width
clientTop=border-top的border-width

七、與offset相關的
1、document.body.offsetWidth;
2、document.body.offsetHeigth;
3、document.body.offsetTop;
4、document.body.offsetLeft;

(1)offsetWidth與offsetHeigth
這一對屬性指的是元素的border+padding+content的寬度和高度。
該屬性和其內部的內容是否超出元素的大小無關，只和本來設定的border以及width和height有關

1、如果padding無滾動條無border
offsetWidth = clientWidth = style.width
2、如果有padding無滾動有border
offsetWidth = style.width+style.padding*2+(border-width)*2
offsetWidth = clientWidth+(border-width)*2
3、如果有padding有滾動，且滾動是顯示的，有border
offsetWidth = clientWidth+滾動軸的寬度+(border-width)*2

（2）offsetLeft和offsetTop

offsetPrarent
1、如果當前元素的父級元素沒有進行CSS定位（position為absolute或relative），offsetParent為body。
2、如果當前元素的父級元素中有CSS定位（position為absolute或relative），offsetParent取最近的那個父級元素。