前端窗口大小和單個(gè)元素大小的計(jì)算
1.?窗口的大小即瀏覽器的大小：?window.innerWidth,?window.innerHeight,?window.outerHeight,?
window.outerWidth?在IE9+，Safari，F(xiàn)irefox,?Chrome中，outerWidth和outerHeight返回瀏覽器窗口本的大小（無論是從最外層的window對(duì)象還是從某個(gè)框架訪問）,?innerHeight和innerWidth是指視口的大小，即瀏覽器可視區(qū)域的大小。
? 在opera中，outerWidth和outerHeight表示頁面可見區(qū)域的大小（不知道能不能這么說，書上說的是，頁面視圖容器的大小，待測(cè)試）
??在IE8及更早版本中，沒有取得當(dāng)前瀏覽器窗口尺寸的屬性，不過，它通過DOM提供了頁面可見區(qū)域的相關(guān)信息
?在IE，F(xiàn)irefox，Safari，Opera和Chrome中保存了頁面視口的信息：?document.documentElement.clientHeight和document.documentElement.clientWidth,
?如果是混雜模式則需要使用document.body.clientWidth和document.body.clientHeight。??目前測(cè)試Firefox和Chrome都有document.body.clientWidth和document.body.clientHeight,?結(jié)果是body的設(shè)置的高度，如果沒有設(shè)置則為實(shí)際高度，不包括margin的上下8px，也就是16px
判斷瀏覽器視口大小的方法
?var?pageWidth?=?window.innerWidth,???????
pageHeight?=?window.innerHeight;?
if(typeof?pageWidth?!==?"number"){?????
if(document.compatMode?==?"CSS1Compat"){???????????
pageWidth?=?document.documentElement.clientWidth;??????????
?pageHeight?=?document.documentElement.clientHeight;??????????
}else{???????????pageWidth?=?document.body.clientWidth;???????????
pageHeight?=?document.body.clientHeight;??????}?}
Firefox?和Chrome中body的默認(rèn)margin為8px，所以需要reset樣式。否則window.innerWidth會(huì)比實(shí)際的少16px
在移動(dòng)設(shè)備上，window.innerWidth和window.innerHeight保存著可見視口，也就是屏幕上可見頁面區(qū)域的大小，而document.documentElement獲取的是布局視口，即頁面的實(shí)際大小。
?移動(dòng)IE瀏覽器不支持window的那些屬性，但是通過document.documentElement.clientWidth和document.documentElement.clientHeight可以獲取可見視口的信息，通過document.body可以獲取布局視口的信息。
前端窗口大小和單個(gè)元素大小的計(jì)算
判斷瀏覽器滾動(dòng)的高度：不建議用?“scrollWidth和scrollHeight,?scrollTop,?scrollLeft”這些，因?yàn)榇嬖跒g覽器兼容問題
? 問題是在chrome和firefox中取得scrollTop的前綴不同，chrome中用document.body取，而在firefox中，document.body取得的值是0，
用document.documentElement取得的值才是正確的。?我們用document.documentElement
.?document.documentElement.scrollWidth和document.documentElement.scrollHeight表示body的實(shí)際尺寸，目前測(cè)試chrome，firefox正確.?
判斷是否滾動(dòng)到底部：
var?buttom?=?document.documentElement.scrollHeight?-?window.innerHeight?-?win-dow.scrollY;?
if(bottom?>?0){???//do?sth?}???window.scrollBy(xnum,?ynum);?
2.?元素大小
?????a.?偏移量?
offsetHeight:?元素在垂直方向上占用空間的大小，以像素計(jì)，包括元素的高度，（可見的）水平滾動(dòng)條的高度，上邊框高度，下邊框高度和內(nèi)邊距。
?offsetWidth:?元素在水平方向上占用空間的大小，以像素計(jì)，包括元素的寬度，（可見的）垂直滾動(dòng)條的高度，左邊框高度，右邊框高度和內(nèi)邊距。
?offsetLeft:?元素的左外邊框至包含元素的左內(nèi)邊框之間的像素距離。
?offsetTop:?元素的上外邊框至包含元素的上內(nèi)邊框之間的像素距離。?包含元素的引用包含在offsetParent屬性中，指據(jù)該元素最近的一個(gè)具有大小的父元素
clientWidth和clientHeight是不包含border的部分
scrollWidth和scrollHeight,分兩種情況,第一種是沒有滾動(dòng)條的時(shí)候,和clientWidth和clientHeight?的值是相同的,即不包含border部分。第二種情況是有滾動(dòng)條的時(shí)候，表示元素的實(shí)際大小?
scrollLeft?和scrollTop?表示隱藏部分的大小，可以修改,?如設(shè)置element.scrollTop?=?0,?則元素內(nèi)容滾動(dòng)到了元素頂部
