![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
WJCorrection status：qualified
Teacher's comments：写的简单了点，建议加上效果图方便查看。
Collection
Collection
<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>盒模型常用元素属性之大小、位置</title><style>.box{width: 300px;height: 300px;background: #7FFFD4;position: relative;border: 2px solid #000;padding: 10px;box-sizing: border-box;/*box-sizing:border-box boxWidth=content+padding+borderbox-sizing:content-box boxWidth=content*/}.box1{width: 100px;height: 100px;background: #7f7f7f;/*垂直水平居中*/position: absolute;margin: auto;top: 0;bottom: 0;left: 0;right: 0;}</style></head><body><div class="box"><div class="box1"></div></div><script>const html = document.documentElement;//返回文档的根节点htmlconsole.log(html.clientWidth);//clientWidth = contentWidth + 左右paddingconsole.log(html.clientHeight);//clientHeight = contentHeight + 上下padding/**下面两个一般不用* clientTop = borderTop 上边框宽度* clientLeft = borderLeft 左边框宽度*/const box = document.querySelector(".box");console.log("box.clientWidth:" + box.clientWidth);console.log("box.offsetWidth:" + box.offsetWidth);/** offsetWidth = contentWidth + 左右padding + 左右border* offsetHeight = contentHeight + 上下padding + 上下border* offsetTop: 当前元素上边框（外边缘）到定位父级（没有定位父级就是body）上边框（内边缘）的距离* offsetLeft:当前元素左边框（外边缘）到定位父级（没有定位父级就是body）左边框（内边缘）的距离*/html.style.height = 2000 + "px";console.log(html.scrollHeight);//当前文档的实际高度 同理scrollWidthconsole.log(html.clientHeight);//当前文档可视区高度console.log(html.scrollTop);//当前文档可视区顶部到文档顶部的距离 同理scrollLeft</script></body></html>