1.offset
offsetWidth/Height ：获取盒子宽/高度–包括内容+padding+border
offsetLeft/Top： 获取距离最近的offsetParent的距离 —距离包括offsetparent的padding，不包括border
offsetParent
一个元素的offsetParent可以是以下其中之一：
具有position属性（除了static值以为）的最近父元素；
最近的table，table cell父元素；
根节点元素（body)；
设置了动画transform:translate的最近父元素；
offsetParent详解
1.父级是否有定位(4种)
2.本身是否有定位(4种)
3.浏览器不一样(5大pc浏览器+老祖宗(ie 6 7 8))
本身定位为fixed
==> offsetParent:null（不是火狐）
--offsetTop和offsetLeft 都是参照于body的
==> offsetParent:body（火狐）
本身定位不为fixed
父级没有定位
==> offsetParent:body
父级有定位
==> offsetParent:定位父级
注意点
1.分清parentNode和offsetParent的区别
parentNode：直接父级
offsetParent：类似于css的包含块
2.offsetParent的作用
offsetLeft 和 offsetTop 是参照于offsetParent的**内边距边界**的
3.dom里所有的元素都是有offsetLeft 和 offsetTop的
2.client
clientWidth/Height: 盒子内容大小–包括padding-- 但是不包括边框和滚动条
clientLeft : 是border-left 的宽度
clientTop : border-top 的宽度
用document.documentElement.clientWidth 获取页面宽高—视口尺寸–
document.documentElement.offsetWidth 根标签的 border-box（除了margin）
3.scroll
scrollWidth/height: 获取内容宽高—包括溢出部分，不包括边框和滚动条
scrollLeft/Top: 获取内容滚动出去的距离，在window.onscroll/element.onscroll…时触发
4. 相对位置和绝对位置
相对位置–盒子到浏览器视口距离
绝对位置–盒子到body距离
获取相对位置方法：getboundingClientRect（）
getBoundingClientRect：一个元素四个角！的相对位置
getBoundingClientRect + 滚动条滚动时元素滚动的距离 = 绝对位置
getBoundingClientRect输出分析：
代表元素border-box的尺寸,就是盒子有border等会当成border-box计算
height： 盒子高
width ： 盒子宽
元素左上角的相对位置
left： 到左边视口距离
top：到上边视口距离
元素右下角的相对位置：加上盒子大小
right = left + 盒子大小
bottom = top + 盒子大小
栗子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
height: 1000px;
}
*{
padding: 0;
margin: 0;
}
.box1{
width: 200px;
height: 200px;
background-color: pink;
margin: 200px 300px;
position: relative;
border: 10px solid red;
}
.box2 {
width: 100px;
height: 100px;
background-color:yellow;
margin-left: 30px;
position: fixed;
/* left: 0; */
}
div {
margin: 100px;
}
</style>
</head>
<body>
<div class="box1">
parent
<div class="box2">
child
</div>
</div>
<script>
var box2 = document.getElementsByClassName('box2')[0];
var box1 = document.getElementsByClassName('box1')[0];
console.log(box1.getBoundingClientRect());
console.log(box2.getBoundingClientRect());
// 绝对位置 getBoundingClientRect + 滚动条滚动时元素滚动的距离（box1滚动为例）
window.onscroll = function () {
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
console.log(scrollTop);
console.log(box1.getBoundingClientRect().top)
var top1 = box1.getBoundingClientRect().top+scrollTop;
console.log('绝对位置：'+top1);
}
</script>
</body>
</html>
输出：
5.获取值区别
// outerHeight属性设置或返回一个窗口的外部高度，包括所有界面元素（如工具栏/滚动条），就是设备宽。
// outerWidth属性设置或返回窗口的外部宽度，包括所有的界面元素（如工具栏/滚动）。
console.log('window outer W' + window.outerWidth )
console.log('window outer h' + window.outerHeight )
// ①宽度：该属性获取的是 包含滚动条宽度的（有的博客乃至菜鸟教程都认为他不包含）浏览器可视区域宽度
// ②高度：但是高度却不包含工具栏高度，只是可视区域高度②IE 8 及更早 IE版本不支持这两个属性，其大小随浏览器缩放变化，不因body边距变化
console.log('window inner w:'+window.innerWidth)
console.log('winodow inner h:'+window.innerHeight)
// ①宽度：浏览器可视区域宽度（不包括滚动条区域宽度，和window.innerWidth区别），其大小随浏览器缩放变化，不因body边距变化
// ②高度：浏览器可视区域高度（不包含工具栏高度）①兼容ie8及更早ie版本
console.log('documentElement w:'+document.documentElement.clientWidth)
console.log('documentElement h:'+document.documentElement.clientHeight)
// 根标签的border-box(除了margin)
console.log('documentElement offset h:'+document.documentElement.offsetHeight)
console.log('documentElement offset w:'+document.documentElement.offsetWidth)
// ①宽度：body文档实际宽度（不包含滚动条区域宽度），随body宽高变化
// ②高度：body文档实际高度（不包含工具栏高度）
console.log('body w:'+document.body.clientHeight)
console.log('body h:'+document.body.clientHeight)