盒子模型

元素计算之后的样式:

getComputedStyle(ele).attr (高版本浏览器使用)

  带单位的尺寸

ele.currentStyle.attr; (IE低版本下使用)

box.currentStyle.width;

 

当前看得见的尺寸:

ele.clientWidth/ele.clientHeight number类型的，支持padding，不支持border

offsetWidth/offsetHeight：既支持border也支持padding的

如果没有固定的宽高且被内容撑开，那么会计算被内容撑开的高度。

scrollWidth/scrollHeight  就算有固定宽高，也能获取被内容撑开的高度(实测不包含边框)

 

offsetLeft:  子元素的左外边框到定位父级的左内边框的距离

offsetTop: 子元素的上外边框到定位父级的上内边框的距离

offsetParent 定位父级   如果子级没有定位，默认走body

 

ele.getBoundingClientRect() -> 返回值为对象

有 x,y,width,height,top,left,right,bottom;

注意：

获取的值，会随着浏览器的变化来变，比如获取top值，如果有滚动条

那么这个值就会发生变化。

它是一直以浏览器可视区为依据，来计算元素到当前可视区的位置