常见尺寸与间距

一、常见尺寸

1.width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。    

$("#div1").width(500)

$("#div1").width('300')

$("#div1").width('300px')

$("#div").width(100).height(200)

扩展：

js中 scrollWidth:获取对象的滚动宽度   （    判断容器内容是否溢出 ：  $(selector).get(0).scrollWidth > $(selector).width()     ）

说明：

1）. 宽高都写在样式表里，就比如#div1{120px;}，
通过#div1.style.width拿不到宽度，
而通过#div1.offsetWidth才可以获取到宽度；
2）. 宽和高是写在行内中，比如style="120px;"，这中情况通过上述2个方法都能拿到宽度

2.innerWidth() 方法设置或返回元素的宽度（包括内边距）。

3.outerWidth() 方法设置或返回元素的宽度（包括内边距和边框）。

4.outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距 ，);      总结 ：  width()<=innerWidth()<=outerWidth()<=outerWidth(true）。

5.可视区域高度

$(window).height()

js兼容写法：

var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

6.文档高度

$(document).height()

7.滚动条到顶部的垂直高度

$(document).scrollTop()

js:  document.documentElement.scrollTop    document.body.scrollTop

8.滚动条到左边的垂直宽度

$(document).scrollLeft()

$(‘div’).scrollLeft(100)

二、间距

 1.offset() 方法返回或设置匹配元素相对于文档的偏移（位置）。    (以左上角为0,0的相对偏移：正值)   

$("#div1").offset()    //  {top: 8, left: 11}

$("p").offset($("span").offset());   // 重叠两元素

2.position() 方法返回匹配元素相对于父元素的位置（偏移）。  (用法同offset() ，只是不能设置，同时其参照是其父元素)

$("p").position().left()

3.offsetParent() 方法返回最近的祖先定位元素( CSS position 属性被设置为 relative、absolute 或 fixed 的元素)。

$("p").offsetParent().css("background-color","red");

4. offsetLeft 属性 ，js提供：元素的边框的外边缘距离与已定位的父容器（offsetparent）的左边距离      &&  offsetTop       ($("p").get(0).offsetLeft)

offsetWidth:元素内容宽度+内边距+边框，不包括外边距    &&  offsetHeight

clientLeft:元素边框的左边框宽度    &&  clientTop

clientWidth:用于描述元素内尺寸宽度，是指 元素内容+内边距 大小，不包括边框、外边距、滚动条部分   &&   clientHeight

scrollWidth：内容区域尺寸加上内边距加上溢出尺寸，当内容正好和内容区域匹配没有溢出时，这些属性与clientWidth和clientHeight相等    &&   scrollHeight

scrollTop：滚动条上方滚动高度   &&     scrollLeft

三、相关文章

JQuery中width和JS中JS中关于clientWidth offsetWidth scrollWidth 等的含义

 js获取元素相对窗口位置的实现代码