元素的寬與高

今天想到了window和document的區別，window是指可視窗口，而document是指文檔，在沒有滾動條的情況下，獲取window和document的高度應該是一樣的

$(window).height() === $(document).height()

但是有滾動條的話，doucment的高度應該大於window的高度，並且這個差值一般情況下應該等於滾動條拉到最底部的scrollTop值，即

$(window).height()+$(document).scrollTop() === $(document).height()

在這裏說明一下在jquery中，獲取寬和高的幾種方法：

width()  ／／不包括 padding,border,margin
height()  ／／不包括 padding,border,margin
innerWidth() ／／不包括  border,margin
innerHeight() ／／不包括 border,margin
outerWidth() ／／不包括  margin
outerHeight()  ／／不包括 margin
outerWidth(true) ／／ 包括全部
outerHeight(true)  ／／ 包括全部

這裏要特別注意下盒子的模型，一般的默認的box-sizing是content-box，這種情況下，設置的padding或者border是在本身content的基礎下往外面加的，也就不會改變元素的寬度大小，但是如果設爲border-box的話，由於padding和border會佔用原先的content，會導致元素的content變小。