窗口缩小 怎么让定位的盒子不动_JavaScipt盒子模型

1.offsetLeft / offsetTop

当前元素距离其父级参照物的左偏移和上偏移

• 父级元素不是父级参照物。
• 偏移的计算是从当前元素的外边框到父级参照物的的内边框。
• 父级参照物：同一平面最外层的元素是所有内层元素的父级参照物。
• 默认情况下，所有的元素在不设置浮动的情况下，所有的元素的父级参照物是BODY。
• 如果元素设置了定位，那么该元素及其内容会形成一个新的平面，该元素为内部元素的父级参照物。

  console.log(outer.offsetParent); //=>BODY
  console.log(box.offsetParent); //=>BODY

  outer.style.position = 'relative';//给outer加一个定位
  console.log(outer.offsetParent); //=>BODY
  console.log(box.offsetParent); //=>OUTER 

7.offsetParent

父级参照物

3.clientWidth/clientHeight

可视化窗口的宽度和高度 CONTENT+PADDING(在怪异盒子模型下)

• 如果内容有溢出并不会影响可视化窗口的宽度和高度
• 在获取浏览器的宽高的时候，是获取浏览器在电脑上显示的一屏幕的宽高

//获取HTML元素对象：document.documentElement
//兼容IE低版本浏览器获取方式：document.body
console.log(document.documentElement.clientWidth);
console.log(document.body.clientHeight);

4.offsetWidth/offsetHeight

在clientWidth/clientHeight的基础上加上左右边框的大小即可，所以也不受内容溢出的情况

5.clientLeft/clientTop

可视窗口左边框和上边框

• 没有获取可视窗口的右边框和下边框
• 内容是否影响对其没有影响

6.scrollWidth/scrollHeight

滚动宽度 滚动高度

• 内容没有溢出的情况：scrollWidth 和scrollHeight 的结果和clientWidth/clientHeight的结果一样
• 内容有溢出的情况：scrollWidth 和scrollHeight 的结果包含了溢出内容的宽和高。（在不同的浏览器中，对内容的渲染机制不一样。设置了overflow，俩者都会对结果产生影响。），即整个页面的真实宽高。

7.scrollLeft/scrollTop

横向滚动条卷去的高度/竖向滚动条卷去的高度

• 最小值为0，是在没有滚动的情况下
• 最大值为scrollHeight-cilentHeight scrollWidth-cilentWidth
• 唯一俩个是可读可写的属性，通过修改对应的值来控制滚动条。