1.盒子模型box-sizing

box-sizing：content-box（传统盒子模型：默认）
box-sizing：border-box 设置border-box后，我们写的width/height不再是内容的宽高，而是content+padding+border的最总大小

2.盒子模型属性

2.1 client系列

2.1.1 clientWidth/clientHeight

获取盒子可视区域宽高，（内容+padding）内容溢出与否无影响，获取的结果没有单位，获取的结果是整数

  1. //获取当前页面一屏幕（可视化）区域的宽高
  2. let winWidth = document.documentElement.clientWidth || document.body.clientWidth;
  3. let winHeight = document.documentElement.clientHeight || document.body.clientHeight;

2.1.2 clientTop/clientLeft

获取盒子上边框和左边框的大小

2.2 offset系列

2.2.1 offsetWidth/offsetHeight

在client的基础上加上border（内容+padding+border）

2.2.2 offsetTop/offsetLeft

offsetTop：距离其父参照物的上偏移
offsetLeft：距离其父参照物的左偏移

2.2.3 offsetParent父参照物

判断offsetParent父参照物的方法：

  • 元素自身有fixed定位，offsetParent结果为null
  • 元素自身无fixed定位，且父级元素都未经过定位，offsetParent结果为body
  • 元素自身无fixed定位，且父级元素存在经过定位的元素，offsetParent的结果为离自身元素最近的经过定位的父级元素
  • body元素的offsetParent为null

    2.3 scroll系列

    2.3.1 scrollWidth/scrollHeight

    在没有内容溢出的情况下获取的结果和clientWidth/clientHeight是一样的。
    有溢出的情况下，获取的宽/高为实际的宽/高

2.3.2 scrollTop/scrollLeft

竖向滚动条卷去的高度
横向滚动条卷起的宽度
边界值：
min = 0
max = 整个高度scrollHeight - 屏幕高度clientHeight
scrollTop/scrollLeft为可读写属性

  1. //回到顶部
  2. document.documentElement.scrollTop = 0
  3. //回到底部
  4. document.documentElement.scrollTop = document.documentElement.scrollHeight - document.documentElement.clientHeight