元素的宽与高

今天想到了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变小。