JS盒子模型

//JS 盒子模型的三个系列  client offset  scroll
let box = document.getElementById("box");
console.log(box.clientWidth);//盒子宽度+左右padding
console.log(box.clientHeight);//盒子高度 + 上下padding
console.log(box.clientTop); //上边框的宽度
console.log(box.clientLeft);//左边框的宽度

console.log(box.offsetWidth);//260 clientWidth +左右border
console.log(box.offsetHeight);
console.log(box.offsetLeft);
console.log(box.offsetTop);//当前元素的外边框到上级参照物的内边框的偏移量
console.log(box.offsetParent);//上级参数物，指的是上层有定位的那一级元素，若都没有定位则直接找到body位置

  console.log(box.scrollWidth);//在没有内容溢出的情况下 等同于 clinet 内容溢出 但是盒子 没有设置 overflow ,那么值是内容宽度加上左padding;设置了overflow 值就是内容宽度加上左右padding;
  console.log(box.scrollHeight);
  console.log(box.scrollLeft);//卷去的内容的宽度
  console.log(box.scrollTop);