<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin: 0px;padding:0px;}
#box{width: 100px;
height: 100px;
margin: 50px;
padding:20px;
border: 10px solid blue;
background: red;}
#box1{margin-left: 30px;
width: 300px;
background: green;}
</style>
</head>
<body>
<div id='box'></div>
<div id='box1'>
<p>邀您共谱算力新篇</p>
<p>邀您共谱算力新篇</p>
<p>邀您共谱算力新篇</p>
<p>邀您共谱算力新篇</p>
<p>邀您共谱算力新篇</p>
<p>邀您共谱算力新篇</p>
<p>邀您共谱算力新篇</p>
<p>邀您共谱算力新篇</p>
<p>邀您共谱算力新篇</p>
<p>邀您共谱算力新篇</p>
<p>邀您共谱算力新篇</p>
<p>邀您共谱算力新篇</p>
<p>邀您共谱算力新篇</p>
<p>邀您共谱算力新篇</p>
<p>邀您共谱算力新篇</p>
<p>邀您共谱算力新篇</p>
<p>邀您共谱算力新篇</p>
<p>邀您共谱算力新篇</p>
<p>邀您共谱算力新篇</p>
<p>邀您共谱算力新篇</p>
<p>邀您共谱算力新篇</p>
<p>邀您共谱算力新篇</p>
<p>邀您共谱算力新篇</p>
<p>邀您共谱算力新篇</p>
<p>邀您共谱算力新篇</p>
<p>邀您共谱算力新篇</p>
<p>邀您共谱算力新篇</p>
<p>邀您共谱算力新篇</p>
<p>邀您共谱算力新篇</p>
<p>邀您共谱算力新篇</p>
<p>邀您共谱算力新篇</p>
<p>邀您共谱算力新篇</p>
<p>邀您共谱算力新篇</p>
<p>邀您共谱算力新篇</p>
<p>邀您共谱算力新篇</p>
<p>邀您共谱算力新篇</p>
<p>邀您共谱算力新篇</p>
<p>邀您共谱算力新篇</p>
<p>邀您共谱算力新篇</p>
<p>邀您共谱算力新篇</p>
<p>邀您共谱算力新篇</p>
<p>邀您共谱算力新篇</p>
<p>邀您共谱算力新篇</p>
<p>邀您共谱算力新篇</p>
<p>邀您共谱算力新篇</p>
<p>邀您共谱算力新篇</p>
<p>邀您共谱算力新篇</p>
<p>邀您共谱算力新篇</p>
<p>邀您共谱算力新篇</p>
<p>邀您共谱算力新篇</p>
<p>邀您共谱算力新篇</p>
<p>邀您共谱算力新篇</p>
<p>邀您共谱算力新篇</p>
<p>邀您共谱算力新篇</p>
</div>
<script>
// offset: 偏移 content + padding + border
// offsetHeight
console.log(box.offsetHeight);//160
// offsetWidth
console.log(box.offsetWidth);//160
// offsetTop
console.log(box.offsetTop);//50== 距离父级的定位距离 也可能是margin
// offsetLeft
console.log(box.offsetLeft);//50== 距离父级的定位距离 也可能是margin
// offsetParent
// client content + padding
// clientWidth
console.log(box.clientWidth);//140
// clientHeight
console.log(box.clientHeight);//140
// scroll ：滚动监听
// scrollHeight
console.log(box1.scrollHeight);//1188
// scrollWidth
console.log(box1.scrollWidth);//300
// scrollTop == (document.documentElement.scrollTop) 卷进去的大小
console.log(document.documentElement.scrollTop);//随机 392
// scrollLeft == (document.documentElement.scrollLeft)
console.log(document.documentElement.scrollLeft);//0
</script>
</body>
</html>
381
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
