盒子模型
盒子模型
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的偏移量）
