js盒子模型

盒子模型

盒子模型

1.CSS盒子模型由四部分构成：手动设定的宽高，padding，border，margin

2.JS盒子模型：可以通过系统提供的方法，来获取元素的样式；·

3.JS盒子模型中系统提供的属性和方法：

1）client系列：clientWidth  clientHeight clientLeft clientTop;

2) offset系列：offsetWidth offsetHeight offsetLeft offsetTop offsetParent

3) scroll系列：scrollWidth scrollHeight scrollLeft scrollTop;

4.关于父级：

结构父级 parentNode

在结构父级中，最大的元素是html元素

最大的节点是document节点

定位父级 offsetParent

在定位里面最大的是body元素

5.逐个解读JS盒子模型的方法：

1）client系列：整个盒子，自己设定的宽跟高，不包括边框

clientWidth/clientHeight:手动设定的宽度/高度+左右的padding/上下的padding

clientLeft/clientTop:左边框的宽度/上边框的宽度

跟内容溢出无关；

2）offset系列：整个盒子的宽高，包括边框

- offsetWidth/offsetHeight:clientWidth/clientHeight+左右border/上下border;    - offsetLeft/offsetTop:当前元素的外边框（不算自己的边框），到定位父级的内边框之间的距离；    跟内容溢出无关；

- 偏移参照----------定位父级offsetParent3)scroll系列：跟内容溢出有关：

当内容没有溢出的情况：就是整个盒子的宽高

-  scrollHeight:等于clientHeight  -  scrollWidth等于clientWidth  -  scrollTop：被浏览器卷去的高度    当内容溢出的情况：

-  scrollHeight:溢出内容的高度+上padding,约等于上padding+真实内容的高度；  -  scrollWidth:溢出左右的宽度+左右padding  -  scrollTop:被浏览器卷去的高度  -  scrollLeft:被浏览器卷去的左右的高度（左右滚动条，可滚动区域（左右溢出部分）    约等于：

1）当内容溢出时，不同浏览器得到的值不同；

2）同一浏览器下，是否设置overflow:hidden得到的值也不同；

-  window.onscroll(滑动滚轮的时候，多次触发的可视窗口的滚轮条  )

- onload  页面加载之后立即执行 加载成功  - onerror 页面加载失败6:关于js盒子模型的小问题

1）以上属性只能拿到复合值；无法拿到单独的值--getCss(获取非行间样式)

2）以上属性只能拿到整数，无法拿到小数--解决不了，四舍五入

3)关于js盒子模型的封装--win;

4)offsetLeft只能求出当前元素的外边框，距离定位父级的内边框之间的距离，无法得到到body的距离

封装 offset（求的是元素到body的偏移量）