js中盒模型的13个属性

// offset系列
  // console.log(box.offsetTop)
  // // box.offsetTop 当前盒子的外边框到 
  // // 上层有定位的元素的内边框的偏移量；上层都没有定位的时候  找到的是body
  // console.log(box.offsetHeight)
  // // box.offsetHeight 盒子一共占有的高度 内容高+俩padding+俩border
  // console.log(box.offsetWidth)
  // // box.offsetHeight 盒子一共占有的宽度 内容高+俩padding+俩border
  // console.log(box.offsetLeft)
  // console.log(box.offsetParent) //上层有定位的元素


  //client系列
  // console.log(box.clientTop) // 盒子 上边框的高度
  // console.log(box.clientHeight) // 盒子 内容+上下padding的高度
  // console.log(box.clientWidth) // 盒子 内容+左右padding的高度
  // console.log(box.clientLeft) // 盒子 左边框的高度

  // console.log(document.body.clientWidth || document.documentElement.clientWidth); // 获取屏幕的宽度

  // scroll 系列
  console.log(box.scrollHeight);
  //  没有内容溢出的时候 跟 clientHight一样 ； 有溢出的时候 是内容高度 + 上padding
  console.log(box.scrollTop);
  // 指的是页面滚过去的高度
  console.log(box.scrollWidth);
  console.log(box.scrollLeft);

  //  以上13个属性 只有box.scrollTop box.scrollLeft 是可以修改的 其他的都是只读的