網頁上的各類寬高

##關係

window對象表示瀏覽器中打開的窗口
window.screen 對象包含有關用戶屏幕的信息
document對象是window對象的一部分

##window window.innerHeight: 去除工具條與滾動條的窗口高度
window.innerWidth: 去除工具條與滾動條的窗口寬度
window.outerHeight:一個窗口的外部高度，包括全部界面元素（如工具欄/滾動條）
window.outerWidth:窗口的外部寬度，包括全部的界面元素（如工具欄/滾動）

##window.screen window.screen.height: 屏幕分辨率的高
window.screen.width: 屏幕分辨率的寬
window.screen.availHeight: 屏幕可用工做區高度，以像素計，減去界面特性，好比窗口任務欄
window.screen.availWidth: 屏幕可用工做區寬度，以像素計，減去界面特性，好比窗口任務欄
window.screenTop: 窗口相對於屏幕的Y座標 window.screenLeft: 窗口相對於屏幕的X座標

##client相關的高度 ###clientWidth&clientHeight:
元素可見部分高度, padding+content。
若是沒有滾動條，即爲元素設定的高度和寬度；
若是出現滾動條，滾動條會遮蓋元素的寬高，那麼該屬性就是其原本寬高減去滾動條的寬高。

1）假如無padding無滾動：
clientWidth=style.width

2）假若有padding無滾動：
clientWidth=style.width+style.padding*2

3）假若有padding有滾動，且滾動時顯示的：
clientWidth=style.width+style.padding*2-滾動條寬度

###clientLeft&clientTop:
這2個返回元素周圍邊框厚度，若是不指定一個邊框或者不定位該元素，其值就是0。
clientTop=border-top的border-width
clientLeft=border-left的border-width

###兼容獲取可視區域寬高 document.documentElement.clientWidth||document.body.clientWidth

documentElement對應HTML標籤，
body對應BODY標籤

##offset相關的高度 ###offsetWidth&offsetHeight:
元素的border+padding+content，該屬性和其內部的內容是否超出元素大小無關，只和原本設定的border以及width和height有關。

若是沒有滾動條，即爲元素設定的高度和寬度；
若是出現滾動條，滾動條會遮蓋元素的寬高，那麼該屬性就是其原本寬高減去滾動條的寬高。

1）假如無padding無滾動：
offsetWidth=clientWidth=style.width

2）假若有padding無滾動：
offsetWidth=style.width+style.padding*2+border寬度*2
offsetWidth=clientWidth+

3）假若有padding有滾動，且滾動時顯示的：
offsetWidth=style.width+style.padding*2+border寬度*2 offsetWidth=clientWidth+滾動條寬度+border寬度*2

###offsetLeft&.offsetTop:
offsetParent:
1）若是當前元素的父級元素沒有進行CSS定位(postion爲absolute或relative)，offsetParent爲body；
2）若是當前元素的父級元素中有CSS定位(postion爲absolute或relative)，offsetParent取最近的那個父級元素；

在IE6/7中
offsetLeft=(offsetParent的padding-left)+(當前元素的margin-left)
在IE8/9/10及chrome中 offsetLeft=(offsetParent的margin-left)+(offParent的border寬度)+(offsetParent的padding-left)+(當前元素的margin-left)
在FireFox中 offsetLeft=(offsetParent的margin-left)+(offsetParent的padding-left)+(當前元素的margin-left)

##document scroll相關的高度 ###document.body的scrollWidth和scrollHeight 1）給定高度小於瀏覽器窗口
scrollWidth=瀏覽器窗口的高度
scrollHeight=瀏覽器窗口的高度

2）給定高度大於瀏覽器窗口，且內容小於給定高度 scrollWidth=給定寬度+內容的padding+margin+border scrollHeight=給定高度+內容的padding+margin+border

3）給定高度大於瀏覽器窗口，且內容大於給定高度 scrollWidth=內容寬度+內容的padding+margin+border scrollHeight=內容高度+內容的padding+margin+border

###某div的scrollWidth和scrollHeight 1）無滾動條：
scrollWidth=clientWidth=style.widhth+style.padding*2

2）有滾動條：
scrollWidth=實際內容寬度+padding*2
scrollHeight=實際內容高度+padding*2

###scrollLeft和scrollTop 當元素其中的內容超出其寬高時，元素被捲起的寬度和高度

##事件event的寬高 1）clientX和clientY：相對於瀏覽器(可視區左上角0,0)的座標；
2）screenX和screenY：相對於設備屏幕左上角(0,0)的座標；
3）offsetX和offsetY：相對於事件源左上角(0,0)的座標；
4）pageX和pageY：相對於真個網頁左上角(0,0)的座標；
5）X和Y：ie屬性，相對於用CSS動態定位的最內層包容元素；

##jQuery裏的寬高 1）width()： 返回無單位， css("width")的結果有單位 2）innerWidth(), innerHeight() ：包括padding和border 3）outerWidth(), outerHeight() ：包括padding, border, margin 4) offset()：相對於document的當前座標值 5）position()：相對於offsetParent的當前座標值